PROMULGATOR

    一念执着

    广东省佛山市
    Html
    Css
    Js

    
                        


                        

                            


#wrapper {
	position:relative;
	width:200px;
	height:100px;
	border:1px solid darkgray;
}
#progressbar {
	position:absolute;
	top:50%;
	left:50%;
	margin-left:-90px;
	margin-top:-10px;
	width:180px;
	height:20px;
	border:1px solid darkgray;
}
/*在进度条元素上调用动画*/
#fill {
	animation:move 2s;
	text-align:center;
	background-color:#6caf00;
}
/*实现元素宽度的过渡动画效果*/
@keyframes move {
	0% {
	width:0;
}
100% {
	width:100%;
}
}

                        

                        



                        

                   

                    
                   

                       
↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

                       
 
  立即下载    

                       

                   


                

                


                

                     
 
                         

                            
方形进度条（原创）

                            

                                
	
                                      
                                                                      
                                    
                                    	
                                                                                                  	                             
                                    
                                                                       
                                

                            

                            

                        

                          

                             
                          

                         

                             
                             
通过间隔定时器实现百分比文字效果,通过计算css动画持续时间进行间隔设置

                         

                     

                   
                


                
0