首页 建站教程 WEB前端 正文

js+css进度条样式

写点笔记让自己以后用的时候方便一点.一个常见的进度条.话不多说,直接上代码.css部分html, body { margin: 0; padding: 0; } .progress { width: 600px; height: 20px; background: #CECBC4;...

写点笔记让自己以后用的时候方便一点.一个常见的进度条.话不多说,直接上代码.
css部分

html, body {
  margin: 0;
  padding: 0;
}

.progress {
  width: 600px;
  height: 20px;
  background: #CECBC4;
  border-left: 1px solid transparent;
  border-right: 1px solid transparent;
  border-radius: 10px;
  margin: 20px auto;
}

.progress > span {
  position: relative;
  float: left;
  margin: 0 -1px;
  min-width: 30px;
  height: 18px;
  line-height: 16px;
  text-align: right;
  border-radius: 10px;
  padding-top: 2px;
  background-image: linear-gradient(to bottom, #f0f0f0 0%, #dbdbdb 70%, #cccccc 100%);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
  font: 13px/20px "Lucida Grande", Tahoma, Verdana, sans-serif;
  font-weight: bold;
}

.progress .blue {
  background: #5aaadb;
  border-color: #459fd6 #3094d2 #277db2;
  background-image: linear-gradient(to bottom, #aed5ed 0%, #7bbbe2 70%, #5aaadb 100%);
}
.move{
        animation:progressDo 5s linear  ;
}
@keyframes progressDo{
        0% {
                width: 0%;
        }
}

html部分
 

<div class="progress">
      <span id="progress"  class="blue move" style="width: 100%;"></span>
    </div>

js部分

window.onload=function(){
                 
                          var width = 0;
                          var interval = setInterval(view,50);  
                          var progress = document.getElementById("progress");
                  function view(e){
                          if(width<parseInt(progress.style.width)){
                                  width++;
                                  progress.innerHTML=width+"%";
                          }else{
                                  clearInterval(interval);
                          }
                  }
          }

最终效果:

js+css进度条样式 进度条 css  图1

打赏
海报

本文由优美主题原创或收集发布

转载请注明本文地址:http://www.umtheme.com/web/28.html

相关推荐

Js实现双击鼠标自动滚动页面效果

Js实现双击鼠标自动滚动页面效果

主要介绍了Js实现双击鼠标自动滚动页面的示例代码,在特定的页面也许可以用的的上例如小说或一些资讯类型的网站,需要的朋友可以试一试。操作比较简单把以下代码加在网站的页面中,就可以实现双击鼠标实现自动滚屏...

WEB前端 2021.03.15 0 145

如何通过css3给自己网站logo添加闪光效果

如何通过css3给自己网站logo添加闪光效果

通过css3给自己网站logo添加闪光效果,感觉效果还不错,可以提升用户对网站或企业的品牌印象。具体实现方法如下:找到自己网站logo外面层的盒子(元素),并给该元素添加以下css代码/*首先我们需...

WEB前端 2021.01.14 2 512

纯css简单实现角标样式

纯css简单实现角标样式

纯css实现角标效果,通常在置顶,推荐,热门等需要特殊标注的场景中可以应用到,这里主要用到transform:rotate(-30deg...

WEB前端 2020.10.16 0 1379

发布评论

ainiaobaibaibaibaobaobeishangbishibizuichiguachijingchongjingdahaqiandaliandangaodw_dogedw_erhadw_miaodw_tuzidw_xiongmaodw_zhutouganbeigeiliguiguolaiguzhanghahahahashoushihaixiuhanheixianhenghorse2huaixiaohuatonghuaxinhufenjiayoujiyankeaikeliankouzhaokukuloukunkuxiaolandelinileimuliwulxhainiolxhlikelxhqiuguanzhulxhtouxiaolxhwahahalxhzanningwennonuokpinganqianqiaoqinqinquantouruoshayanshengbingshiwangshuaishuijiaosikaostar0star2star3taikaixintanshoutianpingtouxiaotuwabiweifengweiquweiwuweixiaowenhaowoshouwuxiangjixianhuaxiaoerbuyuxiaokuxiaoxinxinxinxinsuixixixuyeyinxianyinyueyouhenghengyuebingyueliangyunzanzhajizhongguozanzhoumazhuakuangzuohenghengzuoyi

感谢您的支持