载入前进度动画 – 有爱前端

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> * { box-sizing: border-box; } body { margin: 0; padding: 0; font-family: 'Raleway', sans-serif; font-size: 16px; width: 100%; height: 100vh; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } #loader { width: 550px; } .percent-count { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 2rem 0; font-family: 'Raleway', sans-serif; font-size: 2.5rem; color: #8aaaff; } .progress-bar { background: #e6eeff; width: 500px; height: 10px; border-radius: 50px; margin: auto; overflow: hidden; } .progress-bar .progress { background-image: -webkit-linear-gradient(90deg, #8aaaff, #fa8cff); background-image: -webkit-linear-gradient(left, #8aaaff, #fa8cff); background-image: linear-gradient(90deg, #8aaaff, #fa8cff); width: 3px; height: 10px; border-radius: 5px; } </style> </head> <body> <div id="loader"> <div class="percent-count" id="countText">100%</div> <div class="progress-bar"> <div class="progress" id="progress"></div> </div> </div> </body>  <script type="text/javascript"> 'use strict'; function progress() { var progr = document.getElementById('progress'); var percent = document.getElementById('countText'); var counter = 5; var progress = 25; var id = setInterval(frame, 50); function frame() { if (progress == 500 && counter == 100) { clearInterval(id); document.getElementById("loader").style.display = "none"; // document.getElementById("my_page").style.display = "flex"; } else { progress += 5; counter += 1; progr.style.width = progress + 'px'; percent.innerHTML = counter + '%'; } } } progress(); </script> </html>

提示：你可以先修改部分代码再运行。

转载请注明：有爱前端 » 载入前进度动画