写点笔记让自己以后用的时候方便一点.一个常见的进度条.话不多说,直接上代码.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); } } }
最终效果: