1. css3
html
<div class="container"> <div class="progress"> <div class="progress-bar"> <div class="progress-shadow"></div> </div> </div> </div>
css
body { background-color: #f5f7f9; color: #6c6c6c; font: 300 1em/1.5em; } /* pos */ .container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); } /* reference obj */ .progress { position: relative; width: 24em; height: 0.25em; background-color: #e5e9eb; } /* move obj */ .progress-bar { position: relative; height: 100%; animation-duration: 1s; animation-name: progress; background-image: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55); background-image: -webkit-linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55); background-size: 24em 0.25em; } /* shadow (move) */ .progress-shadow { position: absolute; top: 100%; width: 100%; height: 4em; transform: skew(45deg); transform-origin: 0 0; background-image: linear-gradient(to bottom, #eaecee, transparent); background-image: -webkit-linear-gradient(to bottom, #eaecee, transparent); } /* ani */ @keyframes progress { 0%, 100% { transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85); } 0% { width: 0; } 100% { width: 100%; } }
2. jq
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> *{ margin: 0; padding: 0; } .wrap{ position: relative; margin: 100px; width: 200px; height: 30px; overflow: hidden; line-height: 30px; border: 1px solid red; } .wrap div{ position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background-color: #566; text-align: center; } </style> </head> <body> <div class="wrap"> <div></div> </div> <script src="jquery-1.9.1.min.js" ></script> <script> $('.wrap div').animate({ left:0 },2000); </script> </body> </html>
3. jQMeter
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="jqmeter-container"></div> <script src="jquery-1.9.1.min.js"></script> <script src="http://www.jq22.com/demo/progressBar20151224/js/jqmeter.min.js"></script> <script> $(function(){ $('#jqmeter-container').jQMeter({ goal:'$2,000', raised:'$800', '300px', height:'50px' }); }) </script> </body> </html>
4. 其他进度条