Rectangle 27 2

Well you can use angular-ui bootstrap's <progressbar> directive. The colors that you suggest for the percentages exists in their collection of colors to be assigned as types in a specific state of the progress that you define. These state definitions such as the change in color from a specific value percentage can be manipulated in your controllers. Simply follow the angular-ui implementation with their <progressbar> directive.

very nice. i guess you can use type if you want controller to manage it, instead of ng-class.

angularjs - Bootstrap progress bar colors using angular js - Stack Ove...

angularjs twitter-bootstrap
Rectangle 27 13

This is really interesting actually. Here is your progress bar. Works fine in IE5.5+ and Safari 5 (browsers that I tested).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Progress</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
.progressbar, .progressbar strong {
    display:block;
    height:1.2em
}
.progressbar, .progressbar em {
    width:10em
}
.progressbar strong, .progressbar em {
    position:absolute;
    top:0;
    left:0
}
.progressbar {
    font:status-bar;
    color:windowtext;
    background:window;
    border:1px solid windowframe;
    text-align:center;
    position:relative
}
.progressbar strong {
    background:highlight;
    width:0;
    font-weight:normal;
    overflow:hidden
}
.progressbar em {
    color:highlighttext;
    font-style:normal
}
    </style>
    <script type="text/javascript">
function progress(bar) {
    var text1 = bar.getElementsByTagName('span')[0];
    var overlay = bar.getElementsByTagName('strong')[0];
    var text2 = bar.getElementsByTagName('em')[0];
    var value = parseInt(bar.getAttribute('progress'), 10);
    value += 1;
    overlay.style.width = value / 10 + 'em';
    text1.innerHTML = text2.innerHTML = value + '%';
    bar.setAttribute('progress', value);
    if (value < 100)
        setTimeout(function() { progress(bar) }, 20);
}
window.onload = function() {
    var span = document.getElementsByTagName('span');
    for (var i = 0; i < span.length; i++) {
        if (span[i].className == 'progressbar') {
            span[i].setAttribute('progress', 0);
            var el1 = document.createElement('span');
            el1.innerHTML = '0%';
            span[i].appendChild(el1);
            el1 = document.createElement('strong');
            var el2 = document.createElement('em');
            el2.innerHTML = '0%';
            el1.appendChild(el2);
            span[i].appendChild(el1);
            progress(span[i]);
        }
    }
}
    </script>
</head>
<body>
    <p><span class="progressbar"></span></p>
</body>
</html>

Note that I used setAttribute to assign the value to the progress bar using a custom attribute name.

The above example is just a dummy progress bar, because it uses a timer to increase the value. To do real progressing you have to modify the script a bit. You can change the function progress so that it adds the value to the current value, or you can do it so that it sets the value. The second approach is probably what you want to use.

function add(bar, value) {
    bar = document.getElementById(bar);
    value = parseInt(bar.getAttribute('progress'), 10) + value;
    value = value > 100 ? 100 : value < 0 ? 0 : value;
    var text1 = bar.getElementsByTagName('span')[0];
    var overlay = bar.getElementsByTagName('strong')[0];
    var text2 = bar.getElementsByTagName('em')[0];
    overlay.style.width = value / 10 + 'em';
    text1.innerHTML = text2.innerHTML = value + '%';
    bar.setAttribute('progress', value);
}
function set(bar, value) {
    value = value > 100 ? 100 : value < 0 ? 0 : value;
    bar = document.getElementById(bar);
    var text1 = bar.getElementsByTagName('span')[0];
    var overlay = bar.getElementsByTagName('strong')[0];
    var text2 = bar.getElementsByTagName('em')[0];
    overlay.style.width = value / 10 + 'em';
    text1.innerHTML = text2.innerHTML = value + '%';
}

You can leave out value = value > 100 ? 100 : value < 0 ? 0 : value if you make sure that the value passed to the function is between 0 and 100.

I changed innerText to innerHTML so that it works in Firefox. I wasn't aware of this. I also changed in the CSS display:inline-block to display:block. I know this way you can't have the progress bar inline anymore, but this makes it work in Netscape 9.

Very impressive script, Midas! However, this doesn't seem to work anymore in Webkit browsers (Chrome 30.0.1599.101, Safari 7.0).

Thanks for clearly putting quite a lot of time into making a working solution, it might not be the "accepted answer", but don't underestimate how much resources like this help others! I didn't actually use your code, but it did inspire me to come up with something :)

It seems broken because Chrome doesn't respect system colors, thus the text color is always black. Setting fixed colors in the CSS will solve this.

html - Is there any way to change the color of text "halfway" through ...

html css colors progress-bar
Rectangle 27 2

ng-class

ui.bootstrap has a good example of this for its rating control, using this technique:

ng-class="{'label-warning': percent<33, 'label-info': percent>=33 && percent<66, 'label-success': percent>=66}"

This works for progress bars as well. You just need to define percent somewhere. http://plnkr.co/iBliMPYnWbsJJCtzqWTu

ng-class="{'progress-bar-danger': percent<33, 'progress-bar-info': percent>=33 && percent<66, 'progress-bar-success': percent>=66}"

haha that was clever to use that code. But the colors are not changing

Try the plunk now. Maybe progress bar need progress bar classes only?

angularjs - Bootstrap progress bar colors using angular js - Stack Ove...

angularjs twitter-bootstrap
Rectangle 27 1

Yes it is possible to change the color of the upload bar of bluimp's jQueryUI file uploader in order to achieve the user required/custom colors we have to modify the progressbar.gif image which you can find in the img folder.

Check out your css for the path of the progress.gif image It will look like

.progress-animated .bar {
  background: url(../img/progressbar.gif) !important;
  filter: none;
}

Thanks a lot! I just created a static gif image of the colour I want but it would be great if they can include more colours of the same animated gif

jquery ui - Change progress bar color in blueimp jQueryUI file uploade...

jquery-ui file-upload progress-bar blueimp
Rectangle 27 2

Alternately, what I ended up doing was extending JPanel and painting myself a progress bar with the color I want:

public class ProgressBarCellRenderer extends JPanel implements TableCellRenderer {

    int val = 0;

    private static Paint generatePaint(Color c, int height) {
        return new LinearGradientPaint(0.0f, 0.0f, 0.0f, (float)height, new float[]{0.0f, 0.5f, 1.0f}, new Color[]{c.darker(), c.brighter(), c.darker()}, CycleMethod.REFLECT);
    }

    private static Paint greenPaint = generatePaint(Color.GREEN);
    private static Paint orangePaint = generatePaint(Color.ORANGE);
    private static Paint redPaint = generatePaint(Color.RED);

    @Override
    public void paintComponent(Graphics g) {
        Graphics2D g2d = (Graphics2D)g;
        int x = 1;
        int y = 1;
        int w = getWidth()-2;
        int h = getHeight()-2;
        g2d.setColor(Color.LIGHT_GRAY);
        g2d.fillRect(x, y, w, h);
        Paint backPaint;
        if (val >= 75)
            backPaint = greenPaint;
        else if (val >= 50)
            backPaint = orangePaint;
        else
            backPaint = redPaint;
        g2d.setPaint(backPaint);
        int wd = (int)Math.round(w * val / 100.0);
        g2d.fillRect(x, y, wd, h);
        g2d.draw3DRect(x, y, wd, h, true);
        // Draw some text here if you want
    }
}

Result looks good enough for me and I find it a lot cleaner (and efficient) than the "Nimbus hack"!

Yes, I got tired of searching about how to tweak Nimbus so I went for this quickly. If you see some obvious mistakes or improvements, feel free to edit! I'm into Swing for just a month now :)

java - How to Change JProgressbar Bar color within table cell Using Ni...

java swing jprogressbar tablecellrenderer nimbus
Rectangle 27 1

To build on the prior answer this is how I have the CSS setup to print from Chrome or IE. FireFox still does not work. You'll need to set up each bar color though.. info, success, etc.

@media print{       
            .progress{
                background-color: #F5F5F5 !important;
                -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#F5F5F5', endColorstr='#F5F5F5')" !important;
            }
            .progress-bar-info{
                display: block !important;
                background-color: #5BC0DE !important;
                -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#5BC0DE', endColorstr='#5BC0DE')" !important;
            }

            .progress, .progress > .progress-bar {
                display: block !important;
                -webkit-print-color-adjust: exact !important;

                box-shadow: inset 0 0 !important;
                -webkit-box-shadow: inset 0 0 !important;
            }   
        }

css - Bootstrap 3 - printing colors on progress bars? - Stack Overflow

css twitter-bootstrap-3
Rectangle 27 1

To build on the prior answer this is how I have the CSS setup to print from Chrome or IE. FireFox still does not work. You'll need to set up each bar color though.. info, success, etc.

@media print{       
            .progress{
                background-color: #F5F5F5 !important;
                -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#F5F5F5', endColorstr='#F5F5F5')" !important;
            }
            .progress-bar-info{
                display: block !important;
                background-color: #5BC0DE !important;
                -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#5BC0DE', endColorstr='#5BC0DE')" !important;
            }

            .progress, .progress > .progress-bar {
                display: block !important;
                -webkit-print-color-adjust: exact !important;

                box-shadow: inset 0 0 !important;
                -webkit-box-shadow: inset 0 0 !important;
            }   
        }

css - Bootstrap 3 - printing colors on progress bars? - Stack Overflow

css twitter-bootstrap-3
Rectangle 27 1

function findColor(progress) {
    const thresholds = [30, 60];
    const colors = ["#90B451", "#F9A92F", "#90B451"];

    return colors.find((col, index) => {
        return index >= thresholds.length || progress < thresholds[index];
    });
}

javascript - Switch statement for greater-than/less-than - Stack Overf...

javascript jquery comparison switch-statement
Rectangle 27 3

On my system, the problem was the "redgreen" gem. It automatically colors the progress marks (dots) and the Test::Unit summary messages based on success or failure. There must be something in RubyMine that's trying to parse the Test::Unit results (the output of "rake test", I imagine), and it's choking on the ANSI sequences.

I commented out "require 'redgreen'" in my test/test_helper.rb, and the problem went away. I really like redgreen for executing "rake test" from the shell, though, so I put this in test_helper to make it work for both "rake test" and within RubyMine:

require 'redgreen' if $stdin.tty?

It may not be redgreen that's causing your problem, but be suspicious of anything which might create unconventional Test::Unit output.

ruby on rails - rubyMine 'Unable to attach test reporter to test frame...

ruby-on-rails testing model rspec rubymine
Rectangle 27 1

In this case, you are looking at a graphic which is the capsule shape with the little notched bars. The color bar indicating volume is drawn separately. The coloring of the bars combined with the color of the progressing highlight makes the bars appear to be much darker under the highlight.

So, to reproduce, you really need the standard progress bar and one graphic. You will have to fiddle with the colors to get the bars to standout.

macos - Cocoa Volume Bar - Stack Overflow

cocoa macos audio
Rectangle 27 1

reporters        : ['progress', 'junit', 'coverage'],
    port             : 9876,
    colors           : true,
    logLevel         : config.LOG_INFO,
    // don't watch for file change
    autoWatch        : false,
    // only runs on headless browser
    browsers         : ['PhantomJS'],
    // just run one time
    singleRun        : true,
    // remove `karma-chrome-launcher` because we will be running on headless
    // browser on Jenkins
    plugins          : [
        'karma-jasmine',
        'karma-phantomjs-launcher',
        'karma-junit-reporter',
        'karma-coverage',
        'karma-jenkins-reporter'
    ],
    // changes type to `cobertura`
    coverageReporter : {
        type : 'cobertura',
        dir  : 'target/coverage-reports/'
    },
    // saves report at `target/surefire-reports/TEST-*.xml` because Jenkins
    // looks for this location and file prefix by default.
    junitReporter    : {
        outputDir : 'target/surefire-reports/'
    }

Publish Karma unit tests in Jenkins - Stack Overflow

jenkins karma-runner
Rectangle 27 2

The problem you have is that it is extremely painful to override Nimbus' default colors for a specific component instance (see a related question).

Most of Nimbus painters are defining around 50 different colors, derived from one or two basic ones (the nimbusBlueGrey and famous nimbusOrange). The best way would have been to override them in the UIDefaults found in Nimbus.Override property of the component you want to change, but it's not what they did (I'd like to open a bug on that ;), no seriously!).

I've been trying to achieve the exact same thing and was finally able to by ... (close your eyes) copy-pasting and hacking the javax.swing.plaf.nimbus.ProgressBarPainter class into my own code! Why? Because that class is private to the package and cannot be overriden (which would have been a bit cleaner...). As much as I hate to do that, it worked...

Here is how to modify it (I won't post the whole code as it's way too big and not that interesting):

  • Start by adding the following methods after the ProgressBarPainter() constructor. (they are basically a copy-paste of what you can find following the decodeColor() method down to AbstractRegionPainter then NimbusLookAndFeel then NimbusDefaults.getDerivedColor() and finally DerivedColor.rederiveColor()): private float clamp(float v) { if (v < 0.0f) return 0.0f; if (v > 1.0f) return 1.0f; return v; } private int clamp(int v) { if (v < 0) return 0; if (v > 255) return 255; return v; } // Got from javax.swing.plaf.nimbus.DerivedColor.rederiveColor() private Color decodeColor(Color src, float hOffset, float sOffset, float bOffset, int aOffset) { float[] tmp = Color.RGBtoHSB(src.getRed(), src.getGreen(), src.getBlue(), null); tmp[0] = clamp(tmp[0] + hOffset); tmp[1] = clamp(tmp[1] + sOffset); tmp[2] = clamp(tmp[2] + bOffset); int alpha = clamp(src.getAlpha() + aOffset); return new Color((Color.HSBtoRGB(tmp[0], tmp[1], tmp[2]) & 0xFFFFFF) | (alpha << 24), true); }

Copy-paste the code statically generating the 50 colors to a method you'll use to generate them dynamically, from the color you want:

private Color color1 = decodeColor("nimbusBlueGrey", 0.0f, -0.04845735f, -0.17647058f, 0);
...
private Color color50 = decodeColor("nimbusOrange", 0.0014062226f, -0.77816474f, 0.12941176f, 0);
private void initColors(Color foreground) {
    color1 = decodeColor("nimbusBlueGrey", 0.0f, -0.04845735f, -0.17647058f, 0);
    // ...
    color50 = decodeColor(foreground, 0.0014062226f, -0.77816474f, 0.12941176f, 0);
}

Note that we pass the color we want as a parameter and use it as a replacement of nimbusOrange, which seems to be the main color for progress bars. We try to stick to Nimbus' way of deriving colors.

And change the ProgressBarPainter() constructor to include the main color and generate them:

public ProgressBarPainter(int state, Color foreground) {
    super();
    this.state = state;
    this.ctx = new AbstractRegionPainter.PaintContext(new Insets(5, 5, 5, 5), new Dimension(29, 19), false);
    initColors(foreground); // Generates appropriate colors
}

You'll find how to initialize the ctx field in the source of NimbusDefaults. However, note that the enum AbstractRegionPainter.PaintContext.CacheMode is not visible from the tweaked class so you won't be able to use all the fancy features. Fortunately, there is a simpler constructor to AbstractRegionPainter.PaintContext that doesn't use it. (In my case, I didn't need all of the different states so I used default values, but feel free to add any other parameter to cope with them).

And finally, the Graal! ;) (I'm changing color according to the value that should be a percentage: green if more than 75%, orange if more than 50% and red otherwise).

@Override
public Component getTableCellRendererComponent(JTable table, Object value, boolean isSelected, boolean hasFocus, int row, int column) {
    int v = ((Integer)value).intValue();
    Color c;
    if (val >= 75)
        c = Color.GREEN;
    else if (val >= 50)
        c = Color.ORANGE;
    else
        c = Color.RED;
    setValue(v);
    UIDefaults defaults = new UIDefaults();
    ProgressBarPainter painter = new ProgressBarPainter(ProgressBarPainter.FOREGROUND_ENABLED, c);
    defaults.put("ProgressBar[Enabled].foregroundPainter", painter);
    putClientProperty("Nimbus.Overrides", defaults);
    return this;
}

Now, let's "clean" that a little bit (as much as we can call that a "clean" work):

  • delete the assignments for the private Color colorXX that use nimbusOrange, as they will be generated by the call to initColors().
  • keep the assignments for these which use nimbusBlueGrey, as we're not changing them, and do not include them in the initColors(). That leaves you with an initColors() generating 26 colors (17 to 28, 30, 33 to 44 and 50).
  • if, like me, you only have a few colors to represent for all of you progress bars, pre-generate all ProgressBarPainters you'll ever use and assign the correct one in getTableCellRendererComponent()
private static JProgressBar red, orange, green
this
getTableCellRendererComponent()

java - How to Change JProgressbar Bar color within table cell Using Ni...

java swing jprogressbar tablecellrenderer nimbus
Rectangle 27 0

sounds like you want to hook in theo the Change event and check where the progress is and then recolor the bar from that. looking at The API it looks douable

javascript - how to show progress bar in html with different colors - ...

javascript jquery html jquery-ui progress-bar
Rectangle 27 0

We have been having a similar issue and found a hybrid approach that works for us. We use the standard progress bar @patridge mentioned in a previous post and applied generated Holo styles provided by Android Holo Colors.

We were able to generate a white progress bar images, animation, layer and style that looks very similar to the built in GDK version. You can increase the height of the bar to match the GDK by editing the size of Holo Color's generated png images.

You will need the generated files included in your project, but here is what our theme looks like afterwards:

<style name="OurGlassTheme" parent="@android:style/Theme.DeviceDefault.NoActionBar.Fullscreen">
    <item name="android:progressBarStyleHorizontal">@style/ProgressBarGlass</item>
</style>
<style name="ProgressBarGlass" parent="android:Widget.ProgressBar.Horizontal">
    <item name="android:progressDrawable">@drawable/glass_progress_horizontal_holo_light</item>
    <item name="android:indeterminateDrawable">@drawable/glass_progress_indeterminate_horizontal_holo_light</item>
    <item name="android:minHeight">16dip</item>
    <item name="android:maxHeight">16dip</item>
</style>

I know it's super tedious, but it gets us there while @giladgo 's accepted submission to the Glass developers to provide a GDK Progress Bar is finished.

Google Glass GDK: Progress Indicator? - Stack Overflow

google-glass google-gdk
Rectangle 27 0

ng-class

ui.bootstrap has a good example of this for its rating control, using this technique:

ng-class="{'label-warning': percent<33, 'label-info': percent>=33 && percent<66, 'label-success': percent>=66}"

This works for progress bars as well. You just need to define percent somewhere. http://plnkr.co/iBliMPYnWbsJJCtzqWTu

ng-class="{'progress-bar-danger': percent<33, 'progress-bar-info': percent>=33 && percent<66, 'progress-bar-success': percent>=66}"

haha that was clever to use that code. But the colors are not changing

Try the plunk now. Maybe progress bar need progress bar classes only?

angularjs - Bootstrap progress bar colors using angular js - Stack Ove...

angularjs twitter-bootstrap
Rectangle 27 0

Thanks, but can you point out what exactly is going on with the colors ? I'm quite new at WPF so would like to know more.

@ Anon : I know that this can be done by using ComtrolTemplates. But cannot remember the exact steps. I also will have to go through the msdn examples.

.net - Wrong Colors in WPF Progress Bar - Stack Overflow

.net wpf progress-bar
Rectangle 27 0

You have to replace it, the native Windows progress bar doesn't support custom colors when visual styles are enabled. The colors are selected by the theme that the user preferred. Replacing the progress bar used to be quite easy, it didn't do anything fancy. That got to be a lot harder at Vista though when it got the sub-step interpolation and animation features. Reproducing that takes a lot of code that you probably don't want to maintain.

Realistically, make your own by deriving a class from Control, using LinearGradientBrush or PathGradientBrush in the OnPaint method and keep it static. Or stick with what the user selected, she won't be disappointed.

winforms - how to set color gradient in windows progress bar? - Stack ...

winforms progress-bar
Rectangle 27 0

You could create your own custom progress bar by inheriting from the ProgressBar class:

Imports System.Drawing.Drawing2D
Namespace WindowsFormsApplication1
    Class ProgressBarColor
        Inherits System.Windows.Forms.ProgressBar
        Private _Color As Color
        Private brush As New System.Drawing.Drawing2D.LinearGradientBrush(New Rectangle(1, 1, 1, 1), Color.FloralWhite, Color.Firebrick, LinearGradientMode.Vertical)
        Private m_rec As Rectangle
        Private draw As Boolean

        Private indraw As Boolean = True
        Public Sub New()
            MyBase.New()
            Me.SetStyle(System.Windows.Forms.ControlStyles.UserPaint, True)
            _Color = Color.Red
            m_rec = New Rectangle(1, 1, 1, 1)
            draw = False
        End Sub

        <Category("Appearance"), Description("The Color of the progress bar")> _
        <Browsable(True)> _
        Public Property Color() As Color
            Get
                Return _Color
            End Get
            Set
                _Color = value
            End Set
        End Property


        <Category("Behavior"), Description("Whether or not the progress bar should draw itself when the value hasn't changed")> _
        <Browsable(True)> _
        Public Property DrawEveryFrame() As Boolean
            Get
                Return draw
            End Get
            Set
                draw = value
            End Set
        End Property

        Public Property Rec() As Rectangle
            Get
                Return m_rec
            End Get
            Set
                If value.Height = 0 Then
                    value.Height = 1
                End If
                If value.Width = 0 Then
                    value.Width = 1
                End If
                m_rec = value
                brush = New LinearGradientBrush(value, _Color, Color.FromArgb(_Color.R / 2, _Color.G / 2, _Color.B / 2), LinearGradientMode.Vertical)
            End Set
        End Property

        Protected Overrides Sub OnPaintBackground(pevent As PaintEventArgs)

        End Sub

        Protected Overrides Sub OnPaint(e As System.Windows.Forms.PaintEventArgs)
            Dim width As Integer = 0
            If Value <> 0 Then
                width = (e.ClipRectangle.Width * Value \ Maximum) - 4
            End If
            If (m_rec.X <> e.ClipRectangle.X OrElse m_rec.Y <> e.ClipRectangle.Y OrElse m_rec.Width <> width OrElse m_rec.Height <> e.ClipRectangle.Height - 4) OrElse draw OrElse indraw Then
                indraw = False
                Rec = New Rectangle(e.ClipRectangle.X, e.ClipRectangle.Y, Me.Size.Width, Me.Size.Height)
                If m_rec.Height = 0 Then
                    m_rec.Height = 1
                End If
                If ProgressBarRenderer.IsSupported Then
                    ProgressBarRenderer.DrawHorizontalBar(e.Graphics, e.ClipRectangle)
                End If
                m_rec.Width = CInt(m_rec.Width * (CDbl(Value) / Maximum)) - 4
                m_rec.Height -= 4
                If m_rec.Width = 0 Then
                    m_rec.Width = 1
                End If
                e.Graphics.FillRectangle(brush, 2, 2, m_rec.Width, m_rec.Height)
                MyBase.OnPaint(e)
            End If
        End Sub

    End Class
End Namespace

This will create a custom control in the toolbox that you should be able to add at design time. This is just to get you started. Hopefully it will help. (Note, if the bar is flickering with DrawEveryFrame set to false, you may need to change the LinearGradientBrush to a standard System.Drawing.Brush; or, call ProgressBarColor1.Update() from a timer or mousemove event handler).

So should I just add that to my form1 or into a separate class? @davidsbro

Add this to your form1, but as a separate class, and it will be available in the toolbox.

colors - Progress bar colour vb.net - Stack Overflow

vb.net colors progress-bar
Rectangle 27 0

[http://www.bootply.com/cXz75zjS4a][1] 


[http://codepen.io/jbeurel/pen/zuDAl][1]

<div class="container">
  <h2>Colored Progress Bars</h2>
  <p>The contextual classes colors the progress bars:</p> 
  <div class="progress">
    <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">
      40% Complete (success)
    </div>
  </div>
  <div class="progress">
  <div class="progress-bar progress-bar-primary progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">
    40% Complete (success)
  </div>
</div>
  <div class="progress">
    <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:60%">
      60% Complete (warning)
    </div>
  </div>
  <div class="progress">
    <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%">
      70% Complete (danger)
    </div>
  </div>
</div>

css - Multiline progress-bar bootstrap - Stack Overflow

css twitter-bootstrap twitter-bootstrap-3
Rectangle 27 0

Since the rectangle co-ordinates (especially left-top) is being calculated based on the current alpha value, the starting alpha value of the AlphaAnimation should be based on the time already elapsed.

e.g. If the timer was set for 30 seconds and user enters the activity at 10th second, then animation need to be played for 20 seconds. So the start alpha value should be 20/30 i.e. 0.67f. AlphaAnimation should be instantiated as below:

mAnimation = new AlphaAnimation(0.67f, 0.0f);

this idea cannot be implemented. In onDraw based on integer rem value i am changing the color of progress bar, there we cant insert this line....

android timer view(just like progress bar) updating with colors in Can...

android canvas android-activity progress