脉动或闪烁的进度条[重复]答案

【问题标题】：Pulsating or flashing progress bar [duplicate]脉动或闪烁的进度条[重复]
【发布时间】：2015-07-26 04:42:46
【问题描述】：

如何为进度条创建“脉动”或“闪烁”效果？

我不想在引导程序中执行“活动”类型的条纹进度条，但每当我进行 ajax 调用以检查状态时，我都想“跳动”或使进度条发光。我以前见过这种效果，但我不确定它叫什么或如何查找它。基本上，它从左侧开始，使颜色变浅一些（或 alpha 叠加？），到达结尾，然后恢复正常。

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

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

【问题讨论】：

你引用的文章有一个脉动的环形效果。除了“脉动”这个词之外，我的问题没有任何共同点。
嗨，杰夫，这篇文章概述了如何实现效果的基础知识，您只需使用相同的方法稍微更改 css。
你基本上想做一个带边框的关键帧动画，而不是完全相同的构建你只是用边框替换大小方面。
我以前从未听说过关键帧......所以基本上，我可以使用 alpha 制作“从”颜色和“到”颜色，然后直接回到我的原始颜色。我认为没有针对旧浏览器的解决方案。
没错，伙计。是的，你对以前的浏览器做了一点点，但是自从 IE9 以来已经 6 年了，现在大多数人都得到了强制浏览器更新，除了少数仍然坐在 xp 上的浏览器，现在你可以做一个 jquery 版本而不是stackoverflow.com/questions/7696576/…

标签： javascript css ruby-on-rails twitter-bootstrap progress-bar

【解决方案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 滑入而另一个滑出，等待一秒钟，然后使用相同的“幻灯片”动画还原：

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。

【讨论】：

@DCdaz 这更接近我想要做的。