在今年上半年的项目中用div做过一个进度条，动态显示库存情况，展示方式有点像win10风格的磁盘空间，简洁明了，那个进度条也是来自几年前的收藏。这几年为了更好的适应移动端，响应式布局成为主流，下面这个进度条除了有动态的效果，还具备自适应能力，美观大方的同时更加适合于执行具体任务的场景，留作备用。
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Progress</title> <style type="text/css"> .main { padding: 20px 28px; margin: 0 auto; } .progressNum { text-align: center; font-size: 12px; font-family: 'microsoft yahei'; color: #000; } @keyframes progress-bar-stripes { from { background-position: 40px 0; } to { background-position: 0 0; } } .progress { height: 22px; margin-bottom: 22px; overflow: hidden; background-color: #e4eaec; border-radius: 3px; -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.1); box-shadow: inset 0 1px 2px rgba(0,0,0,.1); } .progress-bar { float: left; width: 0; height: 100%; font-size: 12px; line-height: 22px; color: #fff; text-align: center; background-color: #62a8ea; -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.15); box-shadow: inset 0 -1px 0 rgba(0,0,0,.15); -webkit-transition: width .6s ease; -o-transition: width .6s ease; transition: width .6s ease; } .progress-bar-striped, .progress-striped .progress-bar { background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent); background-image: -o-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent); background-image: linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent); -webkit-background-size: 40px 40px; background-size: 40px 40px; } .progress-bar.active, .progress.active .progress-bar { -webkit-animation: progress-bar-stripes 2s linear infinite; -o-animation: progress-bar-stripes 2s linear infinite; animation: progress-bar-stripes 2s linear infinite; } </style> </head> <body> <div class="main"> <div class="progress"> <div class="progress-bar progress-bar-striped active" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style=" 35.5%" role="progressbar"> </div> </div> 完成进度:<span id="progressNum">35.5% </span> </div> </body> </html>