Question

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

我不是试图在bootstrap中执行“活动”类型的条带进度条，但每当我进行ajax调用以检查状态时，我想“脉动”或使进度条闪耀。我以前见过这种效果，但我不确定它叫什么或者如何寻找它。基本上，它从左侧开始，使颜色变浅（或者是alpha覆盖？），结束，然后恢复正常。

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

这是一个带有我的代码的bootply：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滑入，而另一个滑出，等待一秒，然后使用相同的＆＃34;幻灯片＆＃34;动画：

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。

脉动或闪烁进度条

1 个答案: