css进度条简易实现方法

 

 

css进度条

<style>
progress{
    -webkit-appearance: none;
    height:2px;
    width:30px;
}
::-webkit-progress-bar{
    /* 获取progress */
    background-color: orange;
    /* 进度条未被填充的背景颜色 */
}
::-webkit-progress-value {
    background-color: rgb(43, 255, 0);
    /* 进度条被填充部分的背景颜色 */
}
::-webkit-progress-inner-element {
    border: 0px solid black;
    /* 进度条的内边框，注意跟outline区分 */
}
</style>
<script>
window.onload=function staticProgress () {
  var pg = document.getElementById('pg')
  var timer = setInterval(function () {
    if (pg.value !== 100) {
      pg.value++
    } else {
      clearInterval(timer)
    }
  }, 15)
}
</script>
<progress max="100" value="0" id="pg"></progress>

 

其中100为进度条最终到达百分比

15为1.5秒走完进度.