在今年上半年的项目中用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="width: 35.5%" role="progressbar"></div></div>完成进度:<span id="progressNum">35.5% </span></div> </body> </html>