純CSS實(shí)現(xiàn)不確定進(jìn)度條ep indeterminate動(dòng)畫(huà)與steps()時(shí)序函數(shù)原理剖析【免費(fèi)下載鏈接】epenhance your HTML5 progress bars with minimal effort!項(xiàng)目地址: https://gitcode.com/gh_mirrors/ep/epep是一個(gè)專(zhuān)為 HTML5progress元素打造的輕量級(jí) CSS 增強(qiáng)庫(kù)口號(hào)是effortless progress bars——用最小代價(jià)增強(qiáng)你的進(jìn)度條。它解決的核心痛點(diǎn)是各瀏覽器的progress外觀不一致、限制不同導(dǎo)致開(kāi)發(fā)者常常放棄語(yǔ)義化標(biāo)簽、改用一堆div拼湊。ep 通過(guò)一套跨瀏覽器重置樣式加 CSS 輔助類(lèi)/屬性讓你零 JavaScript 也能玩出不確定進(jìn)度條indeterminate progress bar、模擬加載、計(jì)時(shí)器等效果。本文帶你剖析其中兩個(gè)最巧妙的純 CSS 技術(shù)indeterminate 動(dòng)畫(huà)與steps()時(shí)序函數(shù)。一、什么是不確定進(jìn)度條當(dāng)操作耗時(shí)未知比如等待服務(wù)器響應(yīng)、處理大文件時(shí)顯示已完成 75%是虛假的。此時(shí)更誠(chéng)實(shí)的做法是不確定進(jìn)度條indeterminate progress bar不顯示具體百分比而是讓進(jìn)度條做循環(huán)動(dòng)畫(huà)告訴用戶(hù)正在處理中請(qǐng)稍候。HTML5 原生支持這種狀態(tài)只要給progress元素不設(shè)置value它就會(huì)進(jìn)入:indeterminate偽類(lèi)狀態(tài)。但瀏覽器原生樣式很難看且不一致——這正是 ep 要解決的。二、ep 的 indeterminate 動(dòng)畫(huà)原理 ep 的實(shí)現(xiàn)在 src/styles/core.scss 與 src/styles/_mixins.scss 中核心只有三段邏輯1. 一個(gè)呼吸關(guān)鍵幀keyframes ep-indeterminate { 0% { opacity: 0; } 50% { opacity: $ep-opacity; } /* 默認(rèn) .6 */ 100% { opacity: 0; } }進(jìn)度條寬度直接拉滿(mǎn)100%然后對(duì)整個(gè)元素做 2 秒一次的透明度呼吸動(dòng)畫(huà)0 → 0.6 → 0infinite linear無(wú)限循環(huán)。視覺(jué)上就是一條發(fā)光脈動(dòng)的長(zhǎng)條無(wú)需任何 JS 計(jì)算進(jìn)度。 關(guān)鍵細(xì)節(jié)這個(gè)動(dòng)畫(huà)必須應(yīng)用在progress元素本身上而不是偽元素上。因?yàn)閭卧卦诟鳛g覽器對(duì)progress的兼容性不同比如 Safari/iOS 根本不渲染自定義偽元素進(jìn)度條這是官方文檔明確強(qiáng)調(diào)的跨瀏覽器要點(diǎn)。2. 用color: transparent隱藏 IE 的原生動(dòng)畫(huà)IE 的 indeterminateprogress自帶一套色塊跳動(dòng)動(dòng)畫(huà)與 ep 的極簡(jiǎn)風(fēng)格沖突。ep 在 indeterminate 狀態(tài)下設(shè)置color: transparent——IE 的填充塊顏色取自color屬性設(shè)為透明后原生跳動(dòng)動(dòng)畫(huà)就被隱身了。一行 CSS優(yōu)雅化解。3. iOS Safari 的繞行方案ep--indeterminate輔助類(lèi)已知坑iOS Safari 對(duì) indeterminateprogress支持不佳README 的 Caveats 章節(jié)有明確提示。ep 的解法非常聰明——不要真的把元素設(shè)為 indeterminate而是給它一個(gè)普通進(jìn)度值再疊加輔助類(lèi)ep--indeterminate用類(lèi)選擇器模擬出同樣的滿(mǎn)寬 呼吸動(dòng)畫(huà)。也就是說(shuō)純 CSS 狀態(tài)下假裝 indeterminate比真 indeterminate兼容性更好。三、steps() 時(shí)序函數(shù)原理剖析 如果說(shuō) indeterminate 解決不知道要等多久那 ep 的data-simulate模擬進(jìn)度解決的是請(qǐng)求可能要超時(shí)的場(chǎng)景進(jìn)度條會(huì)緩慢爬升給用戶(hù)系統(tǒng)在努力的反饋爬到 99% 即停避免誤以為馬上完成。這個(gè)效果的靈魂在 src/styles/features/simulate.scssprogress[data-simulate] { animation: ep-simulate 30s steps(30); width: 99%; } keyframes ep-simulate { from { width: 0; } }steps(30)是怎么工作的默認(rèn)的linear時(shí)序函數(shù)會(huì)在 30 秒內(nèi)讓寬度連續(xù)地從 0% 過(guò)渡到 99%。換成steps(30)后瀏覽器把 30 秒切成 30 個(gè)等寬時(shí)間片每片內(nèi)屬性值保持不變?cè)谄c片的交界處瞬間跳變。結(jié)果進(jìn)度條每隔 1 秒跳一級(jí)每級(jí)約 3.3%呈現(xiàn)一格一格的階梯式爬升——這比絲滑動(dòng)畫(huà)更有真實(shí)進(jìn)度的手感也暗示進(jìn)度是事件驅(qū)動(dòng)的。這里steps()的參數(shù)30恰好與動(dòng)畫(huà)時(shí)長(zhǎng)30s和閾值變量$ep-timeout-threshold30三者聯(lián)動(dòng)改一個(gè)配置變量即可整體調(diào)速是配置驅(qū)動(dòng)樣式的典型示范。同理data-timer計(jì)時(shí)器在 src/styles/features/timer.scss 中復(fù)用這一思路用ep-timer關(guān)鍵幀把寬度從 100% 動(dòng)畫(huà)回 0按秒數(shù)控制animation-duration進(jìn)度條就變成了一條可視倒計(jì)時(shí)。四、上手方式速覽 ?場(chǎng)景寫(xiě)法原生不確定進(jìn)度條progress/progress無(wú) value 屬性iOS 兼容的不確定進(jìn)度條progress value0 max1 classep--indeterminate模擬加載30s 到 99%progress contenteditable="false">【免費(fèi)下載鏈接】epenhance your HTML5 progress bars with minimal effort!項(xiàng)目地址: https://gitcode.com/gh_mirrors/ep/ep創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考