本文共 4774 字，大约阅读时间需要 15 分钟。

純前端 - 各種實現進度條

進度條是一個非常常見的功能，實現起來也不難，一般我們會用 <div> 來實現。作為一個這麼常見的需求，這篇就要來康康有哪些，以純前端有哪些有意思的方式來實現進度條。

基礎版 - div

這種方法的作法就是以當前 <div> 為容器，以 <div>::before 為內容填充。用 <div> 的好處就是實現簡單，不過缺點就是標籤語義化不高，不容易維護修改。

代碼實現如下：

   
click me!

.process-1 {    height: 30px;    width: 300px;    background-color: #f5f5f5;    border-bottom-right-radius: 10px;    border-top-right-radius: 10px;}.process-1::before {    counter-reset: progress var(--percent);    content: counter(progress) '%  ';    width: calc(300px * var(--percent, 0) / 100);    display: block;    height: 30px;    line-height: 30px;    font-size: 13px;    color: #fff;    background-color: #2486ff;    text-align: right;    border-bottom-right-radius: 10px;    border-top-right-radius: 10px;}.btn-1 {    margin-top: 15px;}

let startTime = (new Date()).getTime();let currentPercentage = 0;let maxPercentage = 100;let countDelay = 50;let timerId = null;const percentageChange = () => {    let currentTime = (new Date()).getTime();    if (currentTime - startTime >= countDelay) {        currentPercentage++;        startTime = (new Date()).getTime();        document.getElementById("process1").style = `--percent: ${currentPercentage}`;    }    if (currentPercentage < maxPercentage) {        timerId = window.requestAnimationFrame(percentageChange);    } else {        window.cancelAnimationFrame(timerId);    }};document.getElementById("btn1").addEventListener('click', percentageChange);

進階版 - input

這種方法是利用了 HTML5 為 <input> 這個標籤提供了 <input range> 這個新的屬性。其中，還要配合 <input step>, <input min>, <input max>, <input value> 進行實現。基本上代碼和 <div> 的實現大同小異。

代碼實現如下：

click me!

.process2 {    display: block;    height: 20px;    width: 300px;    background-color: #2376b7;}.btn2 {    margin-top: 15px;}

let startTime = (new Date()).getTime();let currentPercentage = 0;let maxPercentage = 100;let countDelay = 50;let timerId = null;const percentageChange = () => {    let currentTime = (new Date()).getTime();    if (currentTime - startTime >= countDelay) {        currentPercentage++;        startTime = (new Date()).getTime();        document.getElementById("process2").value = currentPercentage;        document.getElementById("process2").style.background = `linear-gradient(#2376b7 ${currentPercentage}%, #FFF 0%)`;    }    if (currentPercentage < maxPercentage) {        timerId = window.requestAnimationFrame(percentageChange);    } else {        window.cancelAnimationFrame(timerId);    }};document.getElementById("btn2").addEventListener('click', percentageChange);

高級版 - progress

除了上述兩種方式模擬以外，當然 whatwg (World Hypertext Application Technology Working Group) 有為我們提供原生的進度條標籤，那就是 <progress>。先來看看實際果：

click me!

.process3 {    display: block;    width: 300px;    height: 30px;    -webkit-appearance: none;}.process3::-webkit-progress-bar {    background-color: gainsboro;}.process3::-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    );}.btn3 {    margin-top: 15px;}

let startTime = (new Date()).getTime();let currentPercentage = 0;let maxPercentage = 100;let countDelay = 50;let timerId = null;const percentageChange = () => {    let currentTime = (new Date()).getTime();    if (currentTime - startTime >= countDelay) {        currentPercentage++;        startTime = (new Date()).getTime();        document.getElementById("process3").setAttribute("value", currentPercentage);    }    if (currentPercentage < maxPercentage) {        timerId = window.requestAnimationFrame(percentageChange);    } else {        window.cancelAnimationFrame(timerId);    }};document.getElementById("btn3").addEventListener('click', percentageChange);

終極版 - meter

最後介紹也能實現進度條的一種方式，那就是 <meter> 樭籤。直接先看效果：

click me!

.process4 {    display: block;    width: 300px;    height: 30px;}.btn4 {    margin-top: 15px;}

let startTime = (new Date()).getTime();let currentPercentage = 0;let maxPercentage = 100;let countDelay = 50;let timerId = null;const percentageChange = () => {    let currentTime = (new Date()).getTime();    if (currentTime - startTime >= countDelay) {        currentPercentage++;        startTime = (new Date()).getTime();        document.getElementById("process4").setAttribute("value",currentPercentage);    }    if (currentPercentage < maxPercentage) {        timerId = window.requestAnimationFrame(percentageChange);    } else {        window.cancelAnimationFrame(timerId);    }};document.getElementById("btn4").addEventListener('click', percentageChange);

這篇文章介紹了幾種進度條實現方法，從基礎的 <div> 到現代的 <progress> 和 <meter> 樭籤，展示了前端實現進度條的多樣性。每種方法都有其獨特的優缺點，選擇適合的實現方式取決於具体需求。

转载地址：http://zkmo.baihongyu.com/