当前位置:清晨 » 站长笔记 » css笔记 » css进度条简易实现方法

css进度条简易实现方法

发布日期:2019年7月22日 03:07:14 点击量: 142

宝塔服务器面板,一键全能部署及管理,送你¥3188礼包,点我领取,简单好用的 Linux/Windows 面板

 

 

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.info/2937/,转载请以链接形式注明出处,谢谢合作!

css

老薛主机专属优惠码: PT ,有需要购买的同学可以使用.可享受30%的优惠.

联系站长: shadoweb@qq.com QQ: 925474725

发表评论

电子邮件地址不会被公开。 必填项已用*标注