萬能的漸變！CSS 漸變實(shí)現(xiàn)自適應(yīng)進(jìn)度條

作者：前端偵探 2025-05-13 00:00:05

開發(fā) 前端

那還有其他方式嗎？那當(dāng)然要試一試強(qiáng)大的CSS漸變了，僅需一次平鋪就能實(shí)現(xiàn)上述效果，一起看看吧！

分享一些漸變的實(shí)際案例。

最近在工作中碰到一個(gè)這樣的進(jìn)度條，如下：

image-20250510120005611

和一般進(jìn)度條不同的是，上面多了很多小圓點(diǎn)，每個(gè)小圓點(diǎn)代表一個(gè)進(jìn)度。

由于是完全自適應(yīng)的，圓點(diǎn)可以自定義數(shù)量，寬度也能自動(dòng)分配，就像這樣。

image-20250510120337327

所以不能直接切圖實(shí)現(xiàn)。

這時(shí)，很多同學(xué)可能會(huì)想到用很多標(biāo)簽來實(shí)現(xiàn)這些小圓點(diǎn)。

<divclass="progress">
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  ...
</div>

然后用flex布局就能實(shí)現(xiàn)均等分布了。

確實(shí)也能實(shí)現(xiàn)，不過總覺得用一個(gè)標(biāo)簽來實(shí)現(xiàn)這樣一個(gè)裝飾性的小圓點(diǎn)有點(diǎn)過于冗余了，不夠優(yōu)雅。

那還有其他方式嗎？那當(dāng)然要試一試強(qiáng)大的CSS漸變了，僅需一次平鋪就能實(shí)現(xiàn)上述效果，一起看看吧！

一、漸變平鋪?zhàn)钚卧?/span>

要使用背景平鋪，最關(guān)鍵要搞清楚最小平鋪單元。

拿上面這個(gè)例子，你覺得最小平鋪單元是哪個(gè)呢？

image-20250510131644462

答案是C。

其實(shí)這里有個(gè)技巧，只需要收尾相連，能夠覆蓋整個(gè)容器，就可以當(dāng)做最小平鋪單元。

image-20250510133143094

所以現(xiàn)在的問題就變成了，如何繪制這樣一個(gè)圓孔？（注意，這里的尺寸是動(dòng)態(tài)的）

image-20250510133605654

二、徑向漸變

這是一個(gè)從白色到透明的徑向漸變。

.progress{
  background:radial-gradient(circle at 8px 50%, #fff 2px,transparent 2px) #ccc
}

示意如下：

image-20250511131643955

漸變中心點(diǎn)上下是居中的，距離左邊是 8px，所以是circle at 8px 50%，然后就是關(guān)鍵點(diǎn)了，當(dāng)兩個(gè)分界點(diǎn)重合時(shí)，就能形成邊界分明的圓形。

image-20250510140236109

效果如下：

image-20250510140801906

現(xiàn)在只有一個(gè)圓點(diǎn)，這是因?yàn)槟J(rèn)背景尺寸是100%，撐滿了整個(gè)容器，所以需要手動(dòng)改變背景尺寸，比如我們?cè)O(shè)置

.progress{
  /**/
  background-size:50px 100%
}

效果如下

image-20250510142344997

當(dāng)然這里不能寫死，能夠自由控制圓點(diǎn)數(shù)量，用一個(gè)變量來表示--total: 10，那么平鋪單元的尺寸就是

.progress{
/**/
 --total:10;
 --step:calc((100% - 16px) / (var(--total) - 1);/*注意臨界值*/
 background-size:var(--step) 100%
}

這樣就能隨意控制數(shù)量了，效果如下：

image-20250510142840310

三、自適應(yīng)SVG

雖然徑向漸變實(shí)現(xiàn)代碼很少，但很多同學(xué)表示漸變太難以上手，有沒有更容易得方式呢？還可以試試自適應(yīng)的SVG

我們?cè)谠O(shè)計(jì)軟件里繪制這樣一個(gè)圖形，注意整體輪廓，比如 Figma

image-20250510143243345

然后直接拷貝這段SVG，如下：

<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
  <circle cx="8" cy="8" r="2" fill="white"/>
</svg>

我們需要對(duì)這段SVG做一點(diǎn)小小的改動(dòng)，將寬高改為100%，去除viewBox屬性。

<svg width="100%" height="100%" fill="none" xmlns="http://www.w3.org/2000/svg">
  <circle cx="8" cy="8" r="2" fill="white"/>
</svg>

接著將這段SVG轉(zhuǎn)為內(nèi)聯(lián)形式，直接用到背景中。

.progress{
  /**/
  --total:10;
  --step:calc((100% - 16px) / (var(--total) - 1);
  background:url("data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='2' fill='%23fff'/%3E%3C/svg%3E") #ccc;
  background-size:var(--step) 100%
}

也能達(dá)到相同的效果：

image-20250510142840310

相比前面的方式，這種方式可以不用考慮繁雜的徑向漸變語法。

四、當(dāng)前進(jìn)度

除了背景圖案，還需要當(dāng)前進(jìn)度，我們可以再設(shè)置一個(gè)變量--progress: 3，表示位于第幾個(gè)圓點(diǎn)處。

我們可以再疊加一層線性漸變來實(shí)現(xiàn)當(dāng)前進(jìn)度。這里的進(jìn)度尺寸其實(shí)就是最小單元尺寸 * 當(dāng)前進(jìn)度，具體實(shí)現(xiàn)如下：

.progress{
  background:
radial-gradient(circle at 8px 8px,#fff 2px,transparent 2px) 0 0 /var(--step) 100%,
linear-gradient(#FF5E1A,#FF5E1A) 0 0 / calc((var(--progress) - 1) * var(--step) + 8px) 100% no-repeat #ccc;
}

效果如下：

image-20250510145631986

然后是一個(gè)當(dāng)前進(jìn)度的點(diǎn)，可以直接用偽元素實(shí)現(xiàn)

.progress::after{
 content:'';
 position: absolute;
 box-sizing: border-box;
 width:16px;
 height:16px;
 border:1px solid #fff;
 background-color:#FF5E1A;
 transition:0.3s;
 left:calc((var(--progress) - 1) * var(--step));
}

效果如下：

image-20250510150809099

我們可以隨意改變這兩個(gè)變量來自適應(yīng)各種場(chǎng)景。

Kapture 2025-05-10 at 15.21.27

你也可以訪問在線demo真實(shí)體驗(yàn)：https://codepen.io/xboxyan/pen/MYYPyMZ[1]

五、還可以應(yīng)用到slider上

使用漸變的好處是可以用在各種場(chǎng)景上，沒有html結(jié)構(gòu)限制，比如input type="range"，實(shí)現(xiàn)一個(gè)自定義樣式的滑動(dòng)選擇器。

<inputtype="range">

不同的是需要自定義::-webkit-slider-runnable-track和::-webkit-slider-thumb，具體實(shí)現(xiàn)如下：

[type="range"]{
 --total:20;
 --progress:3;
 --step:calc((100% - 16px) / (var(--total) - 1));
 -webkit-appearance: none;
 appearance: none;
 margin:0;
 outline:0;
 background-color:transparent;
 width:300px;
 overflow: hidden;
 height:16px;

}
[type="range"]::-webkit-slider-runnable-track{
 height:100%;
 position: relative;
 border-radius:16px;
 background:
 radial-gradient(circle at 8px 8px,#fff 2px,transparent 2px) 0 0 / var(--step) 100%,
linear-gradient(#FF5E1A,#FF5E1A) 0 0/
calc((var(--progress) - 1) * var(--step) + 8px) 100% no-repeat #ccc;
}
[type="range"]::-webkit-slider-thumb{
 -webkit-appearance: none;
 appearance: none;
 box-sizing: border-box;
 width:16px;
 height:16px;
 border:1px solid #fff;
 background-color:#FF5E1A;
 border-radius:16px;
 background-size:10px;
 background-position: center center;
 background-repeat: no-repeat;
}

效果如下：

Kapture 2025-05-10 at 18.20.08

現(xiàn)在當(dāng)前進(jìn)度還沒跟上，需要通過JS更新一下。

<input type="range" notallow="this.style.setProperty('--progress', this.value);">

這樣就實(shí)現(xiàn)了一個(gè)自定義滑到選擇器了。

Kapture 2025-05-10 at 18.23.12

你也可以訪問在線demo真實(shí)體驗(yàn)：https://codepen.io/xboxyan/pen/bNNmwZp[2]

六、總結(jié)一下

以上就本文的全部?jī)?nèi)容了，一些關(guān)于漸變的實(shí)際應(yīng)用，你學(xué)到了嗎？下面總結(jié)一下。

用html標(biāo)簽來實(shí)現(xiàn)一個(gè)個(gè)裝飾性的小圓點(diǎn)有點(diǎn)過于冗余了，不夠優(yōu)雅。
CSS 漸變天然支持內(nèi)容平鋪，可以避免大量無意義的標(biāo)簽。
小圓點(diǎn)本質(zhì)上是一個(gè)從白色到透明的徑向漸變。
可以使用CSS變量自動(dòng)計(jì)算需要平鋪的背景尺寸。
除了使用徑向漸變，還可以使用自適應(yīng)SVG來實(shí)現(xiàn)，可以不用考慮繁雜的徑向漸變語法。
當(dāng)前進(jìn)度可以再疊加一層線性漸變實(shí)現(xiàn)。
使用漸變的好處是可以用在各種場(chǎng)景上，沒有html結(jié)構(gòu)限制，可以實(shí)現(xiàn)一個(gè)自定義樣式的滑動(dòng)選擇器。

[1]https://codepen.io/xboxyan/pen/MYYPyMZ： https://codepen.io/xboxyan/pen/MYYPyMZ

[2]https://codepen.io/xboxyan/pen/bNNmwZp： https://codepen.io/xboxyan/pen/bNNmwZp

責(zé)任編輯：武曉燕來源：前端偵探