HTML+CSS实现进度条

最近业务上有了产品预约进度条的需求，故学习已有的一些成熟方案，便捷掌握使用方法

• 均分滚动条

首先是网易云音乐的用户等级进度条

网易云音乐进度条

经过一番搬运整理，我们也可以实现间隔均分段的滚动条，代码中的图像文件来自网易云音乐用户等级页面，感兴趣的读者可到官网上拿取。
以下为CSS样式

以下为HTML结构

    

        
        

        
    
    

        

        

            

                
0
                
1
                
2
                
3
                
4
                
5
                
6
                
7
                
8
                
9
                
10
            
        
        
    

最终效果

效果图

看完了均匀进度的进度条，分享一下不均匀进度的进度条，一个移动端demo

• 不均分进度条

 
  
  
  
  
  
  
  
 
 
    

        

            

            
二级鲜锋官
            
可同时接单数2单
        
        

            
本月升级进度
            

                

                    
本月累计积分(97分)
                    

                        

                            
                        
                        

                            

                                
                                
                                
                                
                            
                            

                            
                            

                        
                        

                            
                        
                    
                
            
        
        
本月累计获得的积分决定下月的等级
        

            
查看等级特权
            
如何提升等级
        
    

    
 

css 样式

// css reset
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0;font-family:"Microsoft yahei";color:#000;}
     ul,ol,li{list-style:none;}
     i,em{font-style:normal}
     img{max-width:100%;}
     html{font-size:62.5%;}
     html,body{background:#f5f5f5;}

     .myGrade-container {width:100%;background:#f5f5f5;}
     .myGrade-header {width:100%;margin-top:20px;border-top:1px solid #d7d7d7;border-bottom:1px solid #d7d7d7;text-align:center;background:#fff;padding:18px 0 20px 0;}
     .grade-img {background-repeat:no-repeat;background-size:66px 66px;width:66px;height:66px;margin:0 auto;}
     .grade-desc {padding:12px 0;color:#fc6605;}
     .grade-amount {font-size:1em;font-family:"Microsoft yahei";}
     .grade-amount i{padding-left:4px;}
     .myGrade-progress-bar {width:100%;}
     .myGrade-progress-bar h4{color:#707070;font-size:1.125em;font-weight:500;padding-left:10px;padding-top:30px;}
     .myGrade-integral {border-top:1px solid #d8d7d8;border-bottom:1px solid #d8d7d8;background:#fff;margin-top:8px;}
     .maGrade-wrap {width:90%;margin:0 auto;padding-bottom:20px;}
     .myGrade-integral h3{font-size:1.125em;font-weight:500;padding:16px 0;}
     .myGrade-integral h3 i{color:#81bb3b;}
     .progress-bar-inner {position:relative;}
     .progree-nums {width:100%;font-size:0;overflow:hidden;}
     .progree-nums span,.progress-score span{float:left;display:inline-block;width:20%;text-align:center;color:#757575;}
     .progress-box{position:relative;height:16px;border:1px solid #a0db58;border-radius:30px;margin-top:5px;}
     .progress-bar{position:absolute;left:0;top:0;height:16px;background:#a0db58;border-radius:30px;z-index:9;}

     .division-bar {position:absolute;left:0;top:0;width:100%;z-index:11;}
     .division-bar .pbar {position:absolute;height:16px;background-color:#a0db58;left:20%;width:1px;}
     .division-bar .w20 {left:20%;}
     .division-bar .w40 {left:40%;}
     .division-bar .w60 {left:60%;}
     .division-bar .w80 {left:80%;}

     .progress-score {position:relative;margin-top:5px;font-size:0;overflow:hidden;}
     .progress-score span{text-align:right;}
     .progress-score i{position:absolute;left:0;top:0;color:#757575;}
     .myGrade-state {width:95%;height:50px;padding-left:5%;margin-top:15px;background:#f5f5f5;color:#707070;border-bottom:1px solid #d8d7d8;}
     .myGrade-list li{width:95%;padding-left:5%;background:#fff;border-bottom:1px solid #d8d7d8;height:60px;line-height:60px;}
     .myGrade-list li i{float:right;padding-right:4%;background:url("images/arrow.png") no-repeat;width:10px;height:17px;background-size:10px 17px;margin-top:22px;}


     /* 当前加粗 */
     .progree-nums span.current{font-weight:700;color:#212121;}
     .division-bar span.current{background-color:#fff;}
     .myGrade-integral h3.current,.myGrade-integral h3.current i{color:#f44336;}
     /* 媒体查询 */
     .grade-desc{font-size:1.8rem;}
     .grade-amount{font-size:1.6rem;}
     .myGrade-progress-bar h4{font-size:1.5rem;}
     .myGrade-integral h3{font-size:1.6rem;}
     .progree-nums span,.progress-score span{font-size:1.5rem;}
     .myGrade-state {font-size:1.5rem;}
     .myGrade-list li {font-size:1.8rem;}
     .progress-score i{font-size:1.5rem;}
     @media (min-width:360px) and (max-width: 399px) {

     }
     @media (min-width: 320px) and (max-width:359px){
        .progress-score i,.progress-score span{font-size:1.3rem;}
     }

     .progress-bar {background:-webkit-gradient(linear, 0 0, 0 100%,from(#a0db58),to(#a0db58));-webkit-animation: load 3s ease-out 1;}

完成效果

完成效果

移动端的demo来自网络，这个demo涉及到了进度条的动态实现，代码比较长比较复杂，实现不均匀进度。