Pulsating or flashing progress bar

Question

How do you create a "pulsating" or "flashing" effect for a progress bar?

I'm not trying to do the "active" type of striped progress bar in bootstrap, but whenever I make an ajax call to check the status, I'd like to "pulsate" or make the progress bar shine. I have seen this effect before, but I'm not sure what it is called or how to look for it. Basically, it starts from the left side, makes the color a bit lighter (or an alpha overlay?), gets the the end, and goes back to normal.

Lot of description, but I am not sure how else to put it. If I could find an example, I probably wouldn't need to ask this question.

Here is a bootply with my code: http://www.bootply.com/vYvoPYiyvl

The article you reference has a pulsating ring effect. Other than the word "pulsating" my question has nothing in common. — Jeff, May 14 '15 at 14:17
Hi Jeff, the article outlines the basics on how to achieve an effect you just change the css slightly its the same method. — , May 14 '15 at 14:18
you'd basically want to do a key-frame animation with a border instead exactly the same build your just replacing the size aspects with a border one. — , May 14 '15 at 14:20
I had never heard of key frames before... so basically, I could do a "from" color and a "to" color with an alpha, then go right back to my original color. I take it there is no solution for older browsers though. — Jeff, May 14 '15 at 14:27
yeah exactly mate. yeah your a little done for previous browsers but its been 6 years since IE9 and most people nowadays get forced browser updates apart from the few that still sit on xp which wont be much longer now you could allways do a jquery version instead http://stackoverflow.com/questions/7696576/javascript-glow-pulsate-effect-to-stop-on-click — , May 14 '15 at 14:36
updated my bootply... Can the animations fade in? or is it just blocky like that? — Jeff, May 14 '15 at 14:43
Some Browsers are not keen on background gradients I would use opacity maybe since your colour changes is jsut from lighter to darker. — , May 14 '15 at 14:54

Jeff · Accepted Answer · 2015-05-14T19:47:22.857

Thanks to @DCDaz, this is what I came up with. To be honest, it's not 100%, but is close enough:

html

<div class="step" id="cp_step3" style="">
      <div class="form-inputs">
        <div cl="row">
          <div class="col-xs-10 col-md-offset-3 col-md-6 col-xs-offset-1">
            <div class="row">
              <div class="spinner-container" id="new-parser-form-spinner">
                <div class="spinner_text text-center" id="spinner_text">
                  Preparing...
                </div>
                <div class="progress" id="new-parser-progress">
                  <div class="progress-bar" style="width:45%;">
                    <span class="sr-only" id="pct">45% Complete</span>
                  </div>
                </div>
                <div class="message">
                  <div class="msg-text text-center"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

css

/* CSS used here will be applied after bootstrap.css */
.progress-bar{
 background:  rgb(255, 215, 109);
    -webkit-animation-name: pulse; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 2s; /* Chrome, Safari, Opera */
    -webkit-animation-iteration-count: infinite;
    animation-name: pulse;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}


@-webkit-keyframes pulse {
    0%   {background: rgb(255, 215, 109);}
    25%   {background: rgb(255, 215, 109);}
    50%   {background: rgb(255, 215, 109);}
    75%  {background: rgb(255, 231, 167);}
    85%{background: rgb(255, 215, 109);}
    100% {background: rgb(255, 215, 109);}
}

@keyframes pulse {
    0%   {background: rgb(255, 215, 109);}
    25%   {background: rgb(255, 215, 109);}
    50%   {background: rgb(255, 215, 109);}
    75%  {background: rgb(255, 231, 167);}
    85%{background: rgb(255, 215, 109);}
    100% {background: rgb(255, 215, 109);}
}

See code at http://www.bootply.com/vYvoPYiyvl

Also, a bit closer to what I was trying to do, is duplicate the div with a different color. This js will cause a duplicated div to slide in while the other slides out, wait a second, then revert using the same "slide" animation:

function pulse(totalMs) {
    //totalMS is the total milliseconds this should take
    quarter = totalMs / 4;
    half = totalMs / 2
    threeTen = totalMs * 3 / 10
    twoTen  = totalMs * 2 / 10

    showTwo(half);
    setInterval(function () {
        showOne(twoTen)
    }, threeTen);
}




function showOne(ms) {
    $('#two').hide("slide", {
        direction: "right"
    }, ms);
    $('#one').show("slide", {
        direction: "left"
    }, ms);
}

function showTwo(ms) {
    $('#one').hide("slide", {
        direction: "right"
    }, ms);
    $('#two').show("slide", {
        direction: "left"
    }, ms);
}


$('#myButton').click(function () {
    pulse(750);
});

Checkout this fiddle.

@DCdaz This is closer to what I was trying to do. – Jeff May 14 '15 at 19:47 — Jeff, May 14 '15 at 19:47

Pulsating or flashing progress bar

1 Answers1