来源：参考 bootstrap
效果图：
、
code：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>进度条</title> <style type="text/css"> .progress { height: 20px; margin-bottom: 20px; overflow: hidden; background-color: #f5f5f5; border-radius: 4px; box-shadow: inset 0 1px 2px rgba(0,0,0,.1); } .progress-bar{ animation: progress-bar-stripes 2s linear infinite; 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); background-size: 40px 40px; } .progress-bar { height: 100%; color: #fff; background-color: #5cb85c; box-shadow: inset 0 -1px 0 rgba(0,0,0,.15); transition: width .6s ease; } @keyframes progress-bar-stripes { from { background-position: 40px 0; } to { background-position: 0 0; } } </style> </head> <body> <div class="progress"> <div class="progress-bar" style=" 40%;"></div> </div> </body> </html>
知识点：animation ，transition