<!--html代码-->
<!DOCTYPE html><html lang="zh"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"><title></title></head><body> ???<div class="progressBox"> ???????<div class="progress" style="display:block;"> ???????????<div class="progress-bar" style="width:40%;"> ???????????????<span id="bbb">40%</span> ???????????</div> ???????</div> ???</div></body></html>
/*css代码*/
.progressBox { ???width:80%; ???height:100%; ???overflow: visible;}.progress { ???height: 30px; ???padding: 6px; ???display:none; ???margin-top:20px; ???background: #809495; ???position: relative; ???overflow: visible; ???border-radius: 30px;}.progress .progress-bar{ ???height:30px; ???z-index: 2; ???position: relative; ???background:#f0ad4e; ???border-radius:30px; ???animation: animate-positive 4s;}.progress .progress-bar span { ???position: absolute; ???top: -15px; ???right:-40px; ???color: #fff; ???width: 60px; ???height: 60px; ???display: block; ???font-size: 17px; ???font-weight: bold; ???background: #f0ad4e; ???line-height: 60px; ???text-align: center; ???border-radius: 100%;}@-webkit-keyframes animate-positive { ???0% { width: 0%;}}@keyframes animate-positive { ???0% { width:0%; }}
纯css进度条效果
原文地址：https://www.cnblogs.com/weiwei0111/p/9093609.html