Vue實現(xiàn)動態(tài)圓環(huán)百分比進度條
更新時間：2021年09月16日 14:46:13 作者：浮夸的小白
這篇文章主要為大家詳細介紹了Vue實現(xiàn)動態(tài)圓環(huán)百分比進度條，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
最近在開發(fā)小程序的時候，碰到一個實現(xiàn)圓環(huán)百分比進度條的需求，類似如下設計圖：
小白的我感覺實現(xiàn)起來有難度，于是上百度看看別人是怎么做的，結果沒找到一個滿意的，要不是靜態(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傳入相應的延遲秒數(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轉化為相應的延遲秒數(shù)
computed: {
delay () {
return `-${this.num}s`
}
}
總結
至此，一個動態(tài)的圓環(huán)百分比進度條基本實現(xiàn)了，還不是很完善，有什么意見或者疑問歡迎提出來。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要給大家介紹了關于vue項目中按鈕防抖處理實現(xiàn)的相關資料,在項目開發(fā)中相必大家時常會遇到按鈕重復點擊后引起事件重復提交的問題,需要的朋友可以參考下2023-08-08
今天我們稍微說一下 vue3 項目中的 hooks 的使用，其實這個 hooks 呢是和 vue2 當中的 mixin 是類似的，學習過 vue2 的小伙伴一定對 mixin 一定比較熟悉，快跟隨小編一起來學習學習吧2022-08-08
本文會通過一個簡單的vue-toast插件，來幫助了解掌握插件的開發(fā)和使用。具有很好的參考價值，下面跟著小編一起來看下吧2017-03-03
在項目里有個打印功能,將頁面的部分內容打印出來,所以下面這篇文章主要給大家介紹了關于利用vue實現(xiàn)打印頁面的幾種方法,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-11-11
一個home頁面,點擊左邊的菜單欄,右邊顯示頁面,因此都知道在右邊放一個router-view然后配置路由即可,然而問題出現(xiàn)在：重新打開的時候,默認是白色空的,遇到這樣的問題如何解決呢,下面小編給大家分享Vue讓router-view默認顯示頁面操作方法,感興趣的朋友一起看看吧2024-03-03
這篇文章主要介紹了uni-app的開發(fā)環(huán)境，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2021-10-10
vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,適合用于構建單頁面應用,下面這篇文章主要給大家介紹了關于降低vue-router版本的2種解決方法,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-07-07
uniapp使用v-loading并且不引入element-ui的操作方法
這篇文章主要介紹了uniapp使用v-loading并且不引入element-ui,首先創(chuàng)建loading.js，創(chuàng)建lloading.scss，本文結合示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-10-10
這篇文章主要介紹了vue中跨域以及sessionId不一致問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-12-12
這篇文章主要為大家介紹了Pinia 的 Setup Stores 語法使用實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09