js的簡單進度條

樣式

<style>.sliderBar-wrap {display: inline-block;width: 100%;border: 1px solid #ccc;margin: 15px 0px;position: relative;}.sliderBar {width: 100%;height: 10px;background-color: rgb(245, 172, 38);border-radius: 3px;animation: progress 10s linear ;}.sliderBar>.sliderBar-control {display: inline-block;width: 25px;height: 25px;text-align: center;line-height: 25px;border: 1px solid rgb(240, 27, 194);border-radius: 50%;background-color: #fff;position: absolute;left: calc(100% - 25px);bottom: -85%;text-align: center;line-height: 25px;animation: move 10s linear ;}@keyframes progress {from {width: 0%;background-color: red;}to {width: 100%;background-color: green;}}@keyframes move {from {left: 0%;}to {left: calc(100% - 25px);}}</style>

布局

<div class="sliderBar-wrap"><div class="sliderBar"><div class="sliderBar-control">0</div></div> </div>

js代碼

<script> var a = document.getElementsByClassName('sliderBar-control')[0] var count = 0 var timer = setInterval(function(){++counta.innerHTML = countif(count>100){ clearInterval(timer)alert('已加載完畢,點擊確定重新加載')history.go(0) }},100);</script>進度條從0開始

到100停止的時候彈出一個加載完成的框，點確定的時候通過 history.go(0) 進行刷新頁面 使進度條重新開始

總結

以上是生活随笔為你收集整理的js简单进度条的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。