多彩分段页面加载进度条效果
代码语言:html
所属分类:进度条
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body { margin: 0; padding: 0; display: -webkit-box; display: flex; width: 100vw; height: 100vh; overflow: hidden; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; } div { all: unset; width: 100%; height: 10px; position: fixed; top: 0; left: 0; background-position: top left; } button { margin: 100px auto; color: #6a7a7a; cursor: pointer; background: #f8f8f8; padding: 0.5rem 1rem; border: 1px solid #d4dbdb; border-radius: 5px; outline: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); max-width: 200px; font: 600 1rem system-ui; letter-spacing: 0.025rem; } button:focus { box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5); } </style> </head> <body translate="no"> <div></div> <button type="button">点击刷新页面</button> <script> const COLORS = ['#ea4235', '#fbbc03', '#33a853', '#4185f4']; const DURATION = 500; const $btn = document.querySelector('button'); const $bar = document.querySelector('div'); const { width } = $bar.getBoundingClientRect(); const animateProgressBar = animate.bind(null, progressCallback); $btn.addEventListener('click', animateProgressBar, false); animateProgressBar(); function animate(progressCallback) { let startTime = 0; let timeElapsed = 0; let progress = 0; let id = null; function _animate(timestamp) { if (!sta.........完整代码请登录后点击上方下载按钮下载查看
网友评论0