一、簡介

? 本篇博客講述了如何實現(xiàn)一個圓形波浪進度條的樣式效果，具體效果參考下方GIF圖。該樣式的加載進度條可以用在頁面跳轉(zhuǎn)或數(shù)據(jù)處理等情況下的加載動畫，比起普通的橫條進度條來說，樣式效果更生動美觀。

實現(xiàn)思路：

? 這個樣式效果看似很簡單，實際上實現(xiàn)起來一點也不難。難的是如何想到實現(xiàn)的思路。

? ① 外層父元素通過border-radius，變成圓形，并設(shè)置其position: ralative;和overflow: hidden;，使其內(nèi)部超出的部分被隱藏。

? ② 在內(nèi)部創(chuàng)建一個子元素，作為實現(xiàn)波浪效果的元素，設(shè)置其寬高為父元素的兩倍，并通過border-radius設(shè)置其圓角。

? ③ 給該子元素設(shè)置一個旋轉(zhuǎn)動畫，使其循環(huán)播放，一直旋轉(zhuǎn)。并通過position: absolute;使子元素的頂部對齊父元素的底部。

? ④ 設(shè)置一個CSS自定義屬性--progress，通過top: calc(100% - var(--progress));控制子元素的在Y軸上的移動。在JS中可以通過控制--progress的數(shù)值，來控制子元素向上移動距離，從而表現(xiàn)整體進度的百分比。由于父元素設(shè)置了overflow: hidden;，所以在子元素旋轉(zhuǎn)上移的過程中，只有一部分內(nèi)容能在父元素內(nèi)容區(qū)域中顯示出來，再加上子元素的旋轉(zhuǎn)+圓角樣式，就形成了波浪的效果。

? ⑤ 再創(chuàng)建一個子元素，內(nèi)部文本顯示進度的百分比數(shù)字，該子元素同樣通過absolute進行絕對定位，使其位于父元素中間，并且z-index的層級大于上面的波浪元素。

頁面效果圖：

幫助理解，去除掉overflow: hidden屬性的效果圖：

二、具體代碼

CSS代碼：

    /* 定一個旋轉(zhuǎn)動畫 用于實現(xiàn)波浪效果 */@keyframes progressRotate {0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}}/* 設(shè)置外層元素樣式 */.progress-box {position: relative;width: 200px;height: 200px;border-radius: 50%;background: #fff;/* 最關(guān)鍵的屬性 */overflow: hidden;}/* 設(shè)置進度條樣式 */.progress {position: absolute;/* 波浪占據(jù)外層圓形區(qū)域的百分比 由 --progress控制 */top: calc(100% - var(--progress));left: 50%;transform: translateX(-50%);z-index: 9;width: 200%;height: 200%;border-radius: 34%;background: #6495ED;/* 添加旋轉(zhuǎn)動畫效果 */animation: progressRotate 2.5s linear infinite;/* 由于上面使用了transform 且動畫中也使用了transform 設(shè)置該屬性使其疊加生效 */animation-composition: add;}/* 設(shè)置進度數(shù)字樣式 */.number {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);z-index: 10;margin: 0;font-size: 24px;}

html代碼：

  <!-- 圓形波浪進度條外層元素 --><div class="progress-box"><!-- 波浪效果元素 設(shè)置了一個css變量  --><div class="progress" style="--progress: 0%"></div><!-- 進度數(shù)字 --><p class="number">0%</p></div>

JavaScript代碼：

		// 獲取進度條元素const progress = document.querySelector('.progress');const number = document.querySelector('.number');// 進度值let progressValue = 0;// 模擬獲取進度let timer = setInterval(() => {progressValue += 1;// 更新波浪進度條的進度progress.style.setProperty('--progress', `${progressValue}%`);// 更新進度數(shù)字number.textContent = `${progressValue}%`;// 記得清除定時器if (progressValue === 100) {clearInterval(timer);}}, 40);