使用純CSS+HTML實現(xiàn)的幾種進度條
當前位置：點晴教程→知識管理交流
→『 技術(shù)文檔交流 』
進度條是一個非常常見的功能，實現(xiàn)起來也不難，一般我們都會用 作為一個這么常見的需求， whatwg 肯定是不會沒有原生組件提供（雖然有我們也不一定會用），那么就讓我們來看看有哪些有意思的進度條實現(xiàn)方式。 常規(guī)版 — div 一波流這是比較常規(guī)的實現(xiàn)方式，先看效果：
源碼如下： <style> .progress1 { height: 20px; width: 300px; background-color: #f5f5f5; border-bottom-right-radius: 10px; border-top-right-radius: 10px; } .progress1::before { counter-reset: progress var(--percent, 0); content: counter(progress) '%\2002'; display: block; height: 20px; line-height: 20px; width: calc(300px * var(--percent, 0) / 100);
color: #fff; background-color: #2486ff; text-align: right; white-space: nowrap; overflow: hidden; border-bottom-right-radius: 10px; border-top-right-radius: 10px; } .btn { margin-top: 30px; } </style> <div id="progress1" class="progress1"></div> <button id="btn" class="btn">點我一下嘛～</button> <script> 'use strict'; let startTimestamp = (new Date()).getTime(); let currentPercentage = 0; let maxPercentage = 100; let countDelay = 100; let timer = null; let start = false; const percentageChange = () => { const currentTimestamp = (new Date()).getTime(); if (currentTimestamp - startTimestamp >= countDelay) { currentPercentage++; startTimestamp = (new Date()).getTime(); progress1.style = `--percent: ${currentPercentage}`; }; if (currentPercentage < maxPercentage) { timer = window.requestAnimationFrame(percentageChange); } else { window.cancelAnimationFrame(timer); }; }; const clickHander = () => { if (!start) { start = true; percentageChange(); }; }; btn.addEventListener('click', clickHander); </script> 這種方法的核心就是以當前盒子為容器，以 進階版 — input type="range"
源碼如下： <style> .progress2[type='range'] { display: block; font: inherit; height: 20px; width: 300px; pointer-events: none; background-color: linear-gradient(to right, #2376b7 100%, #FFF 0%); } .progress2[type='range'], .progress2[type='range']::-webkit-slider-thumb { -webkit-appearance: none; }; .progress2[type='range']::-webkit-slider-runnable-track { border: none; border-bottom-right-radius: 10px; border-top-right-radius: 10px; height: 20px; width: 300px; } .btn { margin-top: 30px; } </style> <input id="progress2" class="progress2" type='range' step="1" min="0" max="100" value="0"/> <button id="btn" class="btn">點我一下嘛～</button> <script> 'use strict'; let startTimestamp = (new Date()).getTime(); let currentPercentage = 0; let maxPercentage = 100; let countDelay = 100; let timer = null; let start = false; let percentageGap = 10; const percentageChange = () => { const currentTimestamp = (new Date()).getTime(); if (currentTimestamp - startTimestamp >= countDelay) { currentPercentage++; startTimestamp = (new Date()).getTime(); progress2.value = currentPercentage; progress2.style.background = `linear-gradient(to right, #2376b7 ${currentPercentage}%, #FFF 0%`; }; if (currentPercentage < maxPercentage) { timer = window.requestAnimationFrame(percentageChange); } else { window.cancelAnimationFrame(timer); }; }; const clickHander = () => { if (!start) { start = true; percentageChange(); }; }; btn.addEventListener('click', clickHander); </script> 寫完這個 demo 才發(fā)現(xiàn)， 另一個是因為 range 有專屬語意 —— 范圍，所以它更適合做下面這種事：
以上demo來自：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range 高級版 — progress 鴨當然，上述兩種方式都是模擬進度條，實際上我們并不需要模擬，因為 whatwg 有為我們提供原生的進度條標簽 —— 我們先看效果：
實現(xiàn)如下： <style> .progress3 { height: 20px; width: 300px; -webkit-appearance: none; display: block; } .progress3::-webkit-progress-value { background: linear-gradient( -45deg, transparent 33%, rgba(0, 0, 0, .1) 33%, rgba(0,0, 0, .1) 66%, transparent 66% ), linear-gradient( to top, rgba(255, 255, 255, .25), rgba(0, 0, 0, .25) ), linear-gradient( to left, #09c, #f44); border-radius: 2px; background-size: 35px 20px, 100% 100%, 100% 100%; } .btn { margin-top: 30px; } </style>
雖然有原生的進度條標簽，但是規(guī)范里并沒有規(guī)定它的具體表現(xiàn)，所以各個瀏覽器廠商完全可以按照自己的喜好去定制，樣式完全不可控，所以標簽雖好。?？捎眯詤s不強，有點可惜。 終極版 — meter 賽高當然，能夠?qū)崿F(xiàn)進度條功能的標簽，除了上面所說的，還有
代碼如下： <style> .progress4 { display: block; font: inherit; height: 50px; width: 300px; pointer-events: none; } .btn { margin-top: 30px; } </style> <meter id="progress4" class="progress4" low="60" high="80" min="0" max="100" value="0"></meter> <button id="btn" class="btn">點我一下嘛～</button> <script> 'use strict'; let startTimestamp = (new Date()).getTime(); let currentPercentage = 0; let maxPercentage = 100; let countDelay = 100; let timer = null; let start = false; const percentageChange = () => { const currentTimestamp = (new Date()).getTime(); if (currentTimestamp - startTimestamp >= countDelay) { currentPercentage++; startTimestamp = (new Date()).getTime(); progress4.value = currentPercentage; }; if (currentPercentage < maxPercentage) { timer = window.requestAnimationFrame(percentageChange); } else { window.cancelAnimationFrame(timer); }; }; const clickHander = () => { if (!start) { start = true; percentageChange(); }; }; btn.addEventListener('click', clickHander); </script> 這個標簽可能比較陌生，實際上它跟 總結(jié)本文測評了4種實現(xiàn)進度條的方式，得出的結(jié)論就是 —— 嗯，萬能的 該文章在 2023/8/24 22:48:21 編輯過 |
關(guān)鍵字查詢
相關(guān)文章
正在查詢... 
|
400 186 1886
