脉动或闪烁的进度条

Question

如何为进度条创建"pulsating"或"flashing"效果？

我并不想在 bootstrap 中使用 "active" 类型的条纹进度条，但每当我调用 ajax 来检查状态时，我想"pulsate" 或者让进度条发光。我以前见过这种效果，但我不确定它叫什么或如何寻找它。基本上，它从左侧开始，使颜色变浅一点（或 alpha 叠加层？），结束，然后恢复正常。

很多描述，但我不知道还能怎么说。如果我能找到一个例子，我可能就不需要问这个问题了。

这是我的代码的引导程序：http://www.bootply.com/vYvoPYiyvl

Answer 1

感谢@DCDaz，这就是我想出的。老实说，这不是 100%，但已经足够接近了：

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);}
}

请参阅 http://www.bootply.com/vYvoPYiyvl

处的代码

此外，更接近我尝试做的是用不同的颜色复制 div。此 js 将导致重复的 div 滑入而另一个滑出，稍等片刻，然后使用相同的 "slide" 动画恢复：

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);
});

结帐this fiddle。

脉动或闪烁的进度条

Pulsating or flashing progress bar

javascript

css

ruby-on-rails

twitter-bootstrap

progress-bar