添加動畫以填充進度條

.progress-bar-outer { 
 
    width: 300px; 
 
    height: 40px; 
 
    flex: auto; 
 
    display: flex; 
 
    flex-direction: row; 
 
    border-radius: 0.5em; 
 
    overflow: hidden; 
 
    background-color: gray; 
 
} 
 

 
.progress-bar-inner { 
 
    /* You can change the `width` to change the amount of progress. */ 
 
    width: 75%; 
 
    height: 100%; 
 
    background-color: red; 
 
} 
 

 
.progress-bar-inner2 { 
 
    /* You can change the `width` to change the amount of progress. */ 
 
    width: 50%; 
 
    height: 100%; 
 
    background-color: green; 
 
}

<div class="progress-bar-outer"> 
 
    <div class="progress-bar-inner"> 
 
    </div> 
 
    <div class="progress-bar-inner2"> 
 
    </div> 
 
</div>

來源

2017-07-14 User7354632781

看看這個[問題]（https://stackoverflow.com/questions/29416077/css3-keyframe-progress-bar） –

如果你正在尋找一個JavaScript解決方案，請上傳你已經嘗試了什麼那沒用。 – j08691

這是我會怎麼做https://jsfiddle.net/f1ajv0Lv/5/

然後，您就需要添加JS更新scaleX風格的進展變化：

$progressBar.css('transform', 'scaleX(' + percentageCompleteFromZeroToOne + ')');

請注意，我添加了一些額外的屬性更好的輔助功能：

<div role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">20 %</div>

見https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_progressbar_role

來源

2017-07-14 20:37:58

我錯過了什麼嗎？我沒有看到任何動畫。 – j08691

對不起！我沒有添加JS來更新進度條的位置，因爲我不知道你從哪裏獲取信息。如果您嘗試使用JS製作動畫，請告訴我，我將更新演示！ –

如何使用JavaScript動畫進度條的小的，基本的，演示：

var $progressBarOuter = $('.progress-bar-outer'); 
 
var $progressBar = $('.progress-bar-inner'); 
 

 
setTimeout(function() { 
 
$progressBar.css('width', '10%'); 
 
setTimeout(function() { 
 
    $progressBar.css('width', '30%'); 
 
    setTimeout(function() { 
 
     $progressBar.css('width', '100%'); 
 
     setTimeout(function() { 
 
      $progressBarOuter.css('display', 'none'); 
 
      console.log('LOADING COMPLETE'); 
 
     }, 500); // WAIT 5 milliseconds 
 
    }, 2000); // WAIT 2 seconds 
 
}, 1000); // WAIT 1 seconds 
 
}, 1000); // WAIT 1 second

.progress-bar-outer { 
 
    width: 300px; 
 
    height: 40px; 
 
    flex: auto; 
 
    display: flex; 
 
    flex-direction: row; 
 
    border-radius: 0.5em; 
 
    overflow: hidden; 
 
    background-color: red; 
 
} 
 

 
.progress-bar-inner { 
 
    height: 100%; 
 
    background-color: green; 
 
}

<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.1.min.js"></script> 
 
<div class="progress-bar-outer"> 
 
    <div class="progress-bar-inner"> 
 
    </div> 
 
</div>

來源

2017-07-14 20:47:44

給這傢伙一槍！

將此內容添加到您的頭文件標籤中。

<script src="jquery-3.2.1.min.js"></script>

然後添加一些js。

$(document).ready(function(){ 
    $(".progress-bar-inner").animate({ 
    width:"100%" 
    }, 5000); 

    $(".progress-bar-inner2").animate({ 
     width:0 
    }, 5000); 

});

我也修改了一下css。

.progress-bar-outer { 
    width: 300px; 
    height: 40px; 
    flex: auto; 
    display: flex; 
    flex-direction: row; 
    border-radius: 0.5em; 
    overflow: hidden; 
    background-color: gray; 
} 
.progress-bar-inner { 
    /* You can change the `width` to change the amount of progress. */ 
    width: 10%; 
    height: 100%; 
    background-color: red; 
} 
.progress-bar-inner2 { 
    /* You can change the `width` to change the amount of progress. */ 
    width: 90%; 
    height: 100%; 
    background-color: green; 
}

來源

2017-07-14 20:49:40 ThomasK

添加動畫以填充進度條

回答

相關問題