<style type="text/css"> .process { width: 10px; height: 18px; background-color: #5bc0de; background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); -webkit-animation: stripes 5s linear infinite; animation: stripes 5s linear infinite; } .processed { padding-right: 100%; -webkit-animation: none; animation: none; } @keyframes stripes { 0% { padding-right: 1%; } 1% { padding-right: 2%; } 3% { padding-right: 4%; } 10% { padding-right: 5%; } 20% { padding-right: 8%; } 30% { padding-right: 30%; } 40% { padding-right: 50%; } 60% { padding-right: 80%; } 80% { padding-right: 100%; } } @-webkit-keyframes stripes {/*Safari and Chrome*/ 0% { padding-right: 1%; } 1% { padding-right: 2%; } 3% { padding-right: 4%; } 10% { padding-right: 5%; } 20% { padding-right: 8%; } 30% { padding-right: 30%; } 40% { padding-right: 50%; } 60% { padding-right: 80%; } 80% { padding-right: 100%; } } </style> <body> <div style="width:500px;height:20px;"> <div id="process" class="process"></div> </div> </body> <script type="text/javascript"> setTimeout(function(){ document.getElementById(‘process‘).className += ‘ processed‘; }, 4000); </script>
原文：https://www.cnblogs.com/hmycheryl/p/9042783.html