Question

我真的非常需要你的帮助......

我需要创建一个带有效果的bootstrap进度条，它看起来像是在加载......

我不喜欢加载bootstrap条纹效果...

我想要一个从左到右突出显示的灯光效果。

这就是我现在所做的：

    <link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css">

       <script type="text/javascript" src="/bootstrap/js/jquery-1.12.0.min.js"></script>
      <script type="text/javascript" src="/bootstrap/js/bootstrap.min.js"></script>
      <style>

            .progress-bar.active, .progress.active .progress-bar {
            animation: reverse progress-bar-stripes 1s linear infinite;
        }

        .progress-bar-striped, .progress-striped .progress-bar {

            background-image: -webkit-linear-gradient(90deg,rgba(255,255,255,1) 50%,transparent 25%,transparent 100%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 100%,transparent);
            background-image: linear-gradient(80deg,rgba(255,255,255,.5) 60%,transparent 25%,transparent 50%,rgba(255,255,255,1) 50%,rgba(255,255,255,1) 75%,transparent 75%,transparent);
            background-image: linear-gradient(90deg,rgba(255,255,255,.5) 15%,transparent 5%,transparent 10%,rgba(255,255,255,.3) 50%,rgba(255,255,255,.5) 95%,transparent 80%,transparent);
            background-image: #fff;
            background-size:100% 100%;




        }
        .progress-bar-gold {
            background-color: #f9e467; /* For browsers that do not support gradients */
            background-color: -webkit-linear-gradient(#f9e467,#fdf4b5, #cb871b); /* For Safari 5.1 to 6.0 */
            background-color: -o-linear-gradient(#f9e467,#fdf4b5, #cb871b); /* For Opera 11.1 to 12.0 */
            background-color: -moz-linear-gradient(#f9e467,#fdf4b5, #cb871b); /* For Firefox 3.6 to 15 */
            background-color: linear-gradient(#f9e467,#fdf4b5, #cb871b); /* Standard syntax */
        }


      </style>
     <div class="progress">
      <div class="progress-bar  progress-bar-gold  progress-bar-striped active" role="progressbar" aria-valuenow="100" aria-valuemin="50" aria-valuemax="100" style="width:50%">
        40%
      </div>
    </div>

Answer 1

看到这个小提琴： https://jsfiddle.net/4s749o36/1/

<强> HTML：

<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<div class="progress">
  <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" origWidth="250px" aria-valuemin="0" aria-valuemax="100" style="width: 0px" id="myprogress">
    <span class="sr-only">45% Complete</span>
  </div>
</div>

<强> jQuery的：

$(function() {
    var newWidth = $("#myprogress").attr("origWidth");
  $("#myprogress").animate({
                        width: newWidth
                    }, 1200);
});

如何使引导进度条从左到右突出显示效果？

1 个答案: