如何使引導程序進度條從左到右突出顯示效果？

Question

我真的很需要你的幫助......

我需要創建效果引導進度條會像它載入中...

我不喜歡引導條紋效果中..

我想要一個從左至右突出顯示的光效。

在這裏我做了什麼現在：

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