当前位置:首页 > 站长笔记 > css笔记 > 正文
运行天数:2910 天 最后更新:2020-4-10

css进度条简易实现方法

用手机或者平板电脑扫描应用扫描本二维码,可以在手机浏览器继续浏览,也可以分享给你的联系人。

2019年07月22日 | 作者: 影子 | 分类: css笔记 | 点击量: 357

 

 

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秒走完进度.

 

 

 

 

 


关键词:

本文网址:https://www.menglei.net/2937/,转载请以链接形式注明出处,谢谢合作!

作者:清晨@网站建设专家. | 清晨,领先的网站优化品牌。

交流QQ号:925474725 邮件支持:shadoweb@qq.com