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

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

開發(fā) 前端

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

分享一些漸變的實際案例。

最近在工作中碰到一個這樣的進度條，如下：

image-20250510120005611

和一般進度條不同的是，上面多了很多小圓點，每個小圓點代表一個進度。

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

image-20250510120337327

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

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

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

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

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

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

一、漸變平鋪最小單元

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

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

image-20250510131644462

答案是C。

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

image-20250510133143094

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

image-20250510133605654

二、徑向漸變

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

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

示意如下：

image-20250511131643955

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

image-20250510140236109

效果如下：

image-20250510140801906

現(xiàn)在只有一個圓點，這是因為默認(rèn)背景尺寸是100%，撐滿了整個容器，所以需要手動改變背景尺寸，比如我們設(shè)置

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

效果如下

image-20250510142344997

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

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

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

image-20250510142840310

三、自適應(yīng)SVG

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

我們在設(shè)計軟件里繪制這樣一個圖形，注意整體輪廓，比如 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>

我們需要對這段SVG做一點小小的改動，將寬高改為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%
}

也能達到相同的效果：

image-20250510142840310

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

四、當(dāng)前進度

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

我們可以再疊加一層線性漸變來實現(xiàn)當(dāng)前進度。這里的進度尺寸其實就是最小單元尺寸 * 當(dāng)前進度，具體實現(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

然后是一個當(dāng)前進度的點，可以直接用偽元素實現(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

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

Kapture 2025-05-10 at 15.21.27

你也可以訪問在線demo真實體驗：https://codepen.io/xboxyan/pen/MYYPyMZ[1]

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

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

<inputtype="range">

不同的是需要自定義::-webkit-slider-runnable-track和::-webkit-slider-thumb，具體實現(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)前進度還沒跟上，需要通過JS更新一下。

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

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

Kapture 2025-05-10 at 18.23.12

你也可以訪問在線demo真實體驗：https://codepen.io/xboxyan/pen/bNNmwZp[2]

六、總結(jié)一下

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

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

[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é)任編輯：武曉燕來源：前端偵探

CSS 自適應(yīng)進度條