&

使用純CSS+HTML實(shí)現(xiàn)的幾種進(jìn)度條

當(dāng)前位置：點(diǎn)晴教程→知識(shí)管理交流 →『技術(shù)文檔交流』

admin

2023年8月24日 22:47 本文熱度 920

進(jìn)度條是一個(gè)非常常見的功能，實(shí)現(xiàn)起來也不難，一般我們都會(huì)用 div 來實(shí)現(xiàn)。

作為一個(gè)這么常見的需求， whatwg 肯定是不會(huì)沒有原生組件提供（雖然有我們也不一定會(huì)用），那么就讓我們來看看有哪些有意思的進(jìn)度條實(shí)現(xiàn)方式。

常規(guī)版 — div 一波流

這是比較常規(guī)的實(shí)現(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">點(diǎn)我一下嘛～</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>

這種方法的核心就是以當(dāng)前盒子為容器，以 ::before 為內(nèi)容填充。用 <div> 的好處就是實(shí)現(xiàn)簡(jiǎn)單，兼容性強(qiáng)，拓展性高，但是美中不足的是標(biāo)簽語義化不強(qiáng)。

進(jìn)階版 — input type="range"

<input /> 是一個(gè)非常實(shí)用的替換元素，不同的 type 可以做不同的事情。第二種就是用 <input type="range" /> 來實(shí)現(xiàn)的。首先我們來看看效果：

源碼如下：

<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">點(diǎn)我一下嘛～</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>

寫完這個(gè) demo 才發(fā)現(xiàn)，<input type="range" /> 并不適合做這個(gè)功能。。一個(gè)是實(shí)現(xiàn)困難，這個(gè) type 組件的每個(gè)元件都可以單獨(dú)修改樣式，但是效果并不是很好。

另一個(gè)是因?yàn)?nbsp;range 有專屬語意 —— 范圍，所以它更適合做下面這種事：

以上demo來自：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range

高級(jí)版 — progress 鴨

當(dāng)然，上述兩種方式都是模擬進(jìn)度條，實(shí)際上我們并不需要模擬，因?yàn)?nbsp;whatwg 有為我們提供原生的進(jìn)度條標(biāo)簽 —— <progress> 。

我們先看效果：

實(shí)現(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>


<button id="btn" class="btn">點(diǎn)我一下嘛～</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();
      progress3.setAttribute('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>

雖然有原生的進(jìn)度條標(biāo)簽，但是規(guī)范里并沒有規(guī)定它的具體表現(xiàn)，所以各個(gè)瀏覽器廠商完全可以按照自己的喜好去定制，樣式完全不可控，所以標(biāo)簽雖好。。可用性卻不強(qiáng)，有點(diǎn)可惜。

終極版 — meter 賽高

當(dāng)然，能夠?qū)崿F(xiàn)進(jìn)度條功能的標(biāo)簽，除了上面所說的，還有 <meter> 標(biāo)簽。先看效果：

代碼如下：

<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">點(diǎn)我一下嘛～</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>

這個(gè)標(biāo)簽可能比較陌生，實(shí)際上它跟 <input type="range"> 的語義是一樣的，用來顯示已知范圍的標(biāo)量值或者分?jǐn)?shù)值。不一樣的就是。。。它樣式改起來更麻煩。

總結(jié)

本文測(cè)評(píng)了4種實(shí)現(xiàn)進(jìn)度條的方式，得出的結(jié)論就是 —— <div> 賽高。。。雖然有的時(shí)候想優(yōu)雅一點(diǎn)追求標(biāo)簽語義化，但是資源不支持，也很尷尬。

嗯，萬能的 <div> 。

該文章在 2023/8/24 22:48:21 編輯過

關(guān)鍵字查詢

html

css

實(shí)現(xiàn)

進(jìn)度

相關(guān)文章

正在查詢...

點(diǎn)晴ERP是一款針對(duì)中小制造業(yè)的專業(yè)生產(chǎn)管理軟件系統(tǒng),系統(tǒng)成熟度和易用性得到了國(guó)內(nèi)大量中小企業(yè)的青睞。

點(diǎn)晴PMS碼頭管理系統(tǒng)主要針對(duì)港口碼頭集裝箱與散貨日常運(yùn)作、調(diào)度、堆場(chǎng)、車隊(duì)、財(cái)務(wù)費(fèi)用、相關(guān)報(bào)表等業(yè)務(wù)管理，結(jié)合碼頭的業(yè)務(wù)特點(diǎn)，圍繞調(diào)度、堆場(chǎng)作業(yè)而開發(fā)的。集技術(shù)的先進(jìn)性、管理的有效性于一體，是物流碼頭及其他港口類企業(yè)的高效ERP管理信息系統(tǒng)。

點(diǎn)晴WMS倉儲(chǔ)管理系統(tǒng)提供了貨物產(chǎn)品管理,銷售管理,采購管理,倉儲(chǔ)管理,倉庫管理,保質(zhì)期管理,貨位管理,庫位管理,生產(chǎn)管理,WMS管理系統(tǒng),標(biāo)簽打印,條形碼,二維碼管理,批號(hào)管理軟件。

點(diǎn)晴免費(fèi)OA是一款軟件和通用服務(wù)都免費(fèi)，不限功能、不限時(shí)間、不限用戶的免費(fèi)OA協(xié)同辦公管理系統(tǒng)。