Vue實現(xiàn)動態(tài)圓環(huán)百分比進(jìn)度條
最近在開發(fā)小程序的時候，碰到一個實現(xiàn)圓環(huán)百分比進(jìn)度條的需求，類似如下設(shè)計圖：
小白的我感覺實現(xiàn)起來有難度，于是上百度看看別人是怎么做的，結(jié)果沒找到一個滿意的，要不是靜態(tài)的實現(xiàn)，就是需要用到比較多的DOM操作，小程序還是盡量避免直接操作DOM。
下面是我以Vue組件形式做的一個動態(tài)的實現(xiàn)，先上效果圖：
效果
實現(xiàn)步驟
畫一個餅圖
.pie {
display: inline-block;
position: relative;
width: 150px;
height: 150px;
margin-top: 40px;
border-radius: 50%;
background: #ccc;
background-image: linear-gradient(to right, transparent 50%, #4479FD 0);
color: transparent;
text-align: center;
}
實現(xiàn)占比效果
通過添加偽元素遮擋和移動實現(xiàn)，代碼如下：
.pie::before {
content: '';
position: absolute;
top: 0; left: 50%;
width: 50%; height: 100%;
border-radius: 0 100% 100% 0 / 50%;
background-color: inherit;
transform-origin: left;
animation: spin 5s linear infinite, bg 10s step-end infinite;
}
@keyframes spin {
to { transform: rotate(.5turn); }
}
@keyframes bg {
50% { background: #4479FD; }
}
使用CSS動畫延遲屬性
將上面的animation動畫時間分別改為50, 100，這樣可以直接在animation-delay傳入相應(yīng)的延遲秒數(shù)，比如-60s則是顯示在百分之六十
animation-play-state: paused; animation-delay: -60s;
實現(xiàn)圓環(huán)形狀
直接在div里加上一個定位的div
<div class="pie">
<div class="pie-inner">
{{num}}%
</div>
</div>
加上一個勻速動畫
startAnimate (step, limit, speed) {
setTimeout(() => {
// num 為百分比
if (this.num < limit) {
this.num += step
this.startAnimate(step, limit, speed)
} else {
this.num = limit
}
}, speed)
}
給animation-delay綁定計算屬性
實時根據(jù)num轉(zhuǎn)化為相應(yīng)的延遲秒數(shù)
computed: {
delay () {
return `-${this.num}s`
}
}
總結(jié)
至此，一個動態(tài)的圓環(huán)百分比進(jìn)度條基本實現(xiàn)了，還不是很完善，有什么意見或者疑問歡迎提出來。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了淺談Vue為什么不能檢測數(shù)組變動，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
這篇文章主要為大家詳細(xì)介紹了如何使用Vue和React分別實現(xiàn)錨點定位功能,文中的示例代碼講解詳細(xì),具有一定的借鑒價值,有需要的小伙伴可以學(xué)習(xí)一下2024-01-01
vue給數(shù)組中對象排序 sort函數(shù)的用法
這篇文章主要介紹了vue給數(shù)組中對象排序 sort函數(shù)的用法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
vue項目實現(xiàn)國際化的基本思路與詳細(xì)步驟
國際化是指項目能夠根據(jù)不同國家的語言進(jìn)行轉(zhuǎn)換,便于不同國家的用戶使用,這篇文章主要給大家介紹了關(guān)于vue項目實現(xiàn)國際化的基本思路與詳細(xì)步驟,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-04-04
這篇文章主要介紹了vue3?vscode插件volar配置,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-07-07
vue實現(xiàn)類似淘寶商品評價頁面星級評價及上傳多張圖片功能
最近在寫一個關(guān)于vue的商城項目，然后集成在移動端中，開發(fā)需求中有一界面，類似淘寶商城評價界面！接下來通過本文給大家分享vue實現(xiàn)類似淘寶商品評價頁面星級評價及上傳多張圖片功能，需要的朋友參考下吧2018-10-10
Vue Element-ui實現(xiàn)樹形控件節(jié)點添加圖標(biāo)詳解
這篇文章主要為大家介紹了Element-ui實現(xiàn)樹形控件節(jié)點添加圖標(biāo)，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-11-11
本篇文章主要介紹了vue-loader教程介紹，vue-loader就是告訴webpack如何將vue格式的文件轉(zhuǎn)換成js。有興趣的可以了解一下2017-06-06
關(guān)于Elementui中toggleRowSelection()方法實現(xiàn)分頁切換時記錄之前選中的狀態(tài)
這篇文章主要介紹了關(guān)于Elementui中toggleRowSelection()方法實現(xiàn)分頁切換時記錄之前選中的狀態(tài),具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了Vue3中如何獲取鼠標(biāo)在瀏覽器x軸和y軸的位置問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07