利用css3實現(xiàn)進度條效果及動態(tài)添加百分比
發(fā)布時間：2020-06-01 16:33:32 作者：someWhere_weMeet 
我要評論
我要評論這篇文章主要介紹了利用css3實現(xiàn)進度條效果及動態(tài)添加百分比，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
項目過程中，開始使用了js的requestAnimationFrame方法實現(xiàn)進度條，但是在數(shù)據(jù)超級多的時候非常影響性能，如此改用css去實現(xiàn)，優(yōu)化。
先貼代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
*{margin: 0;padding: 0}
.box{width: 100px;height: 10px;border-radius: 10px;background: #999;margin: 100px auto;border: 1px solid #ff6780;}
.child{position: relative;height:100%;border-radius:inherit;}
.process-animate{background: #ff6780;position: absolute;left: 0;top: 0;bottom: 0;border-radius:inherit;
animation: process 1s linear forwards ;
}
@keyframes process
{
0%{
left:0;right:100%;
}
20%{
right:80%
}
40%{
right:60%;
}
60%{right:40%;}
80%{right:20%;}
100%{right:0;}
}
</style>
</head>
<body>
<div class="box">
<div class="child" style="width:50%"> // child的百分比就是進度條的占比效果
<p class="process-animate"></p>
</div>
</div>
</body>
</html>
效果圖（復制代碼可查看動態(tài)效果）：
正常情況下，百分比肯定是根據(jù)后臺數(shù)據(jù)進行計算得出的，所以是動態(tài)傳入的，下面貼vue代碼
進度條子組件（progress.vue）：
<template>
<div class="process-wrapper" :class="{'addGray':addGray}">
<div class="process-child" ref="processChild">
<p class="process-animate" :class="{'addGray':addGray}"></p>
</div>
</div>
</template>
<script>
export default {
props: {
addGray: {
//置灰
type: Boolean,
default: false
},
progressWidth: {
//進度條百分比
type: Number,
default: 0
}
},
mounted() {
this.$nextTick(() => {
console.log(this.addGray, "addGray---");
this.$refs.processChild.style.width = this.progressWidth + "%"; //動態(tài)改變進度條
// this.$refs.processChild.style.width = 90 + "%"; 測試效果
});
}
};
</script>
<style lang="scss" scoped>
.process-wrapper {
width: 1.98rem;
height: 0.13rem;
margin: 0.12rem 0 0.1rem 0;
border-radius: 0.1rem;
background: #fff;
border: 0.01rem solid #ff6780;
&.addGray {
background: #999;
border: 0.01rem solid #999;
}
.process-child {
position: relative;
height: 100%;
// width: 100%; //這個width就是動態(tài)變化。通過js改變
border-radius: inherit;
.process-animate {
background: #ff6780;
position: absolute;
left: 0;
top: 0;
bottom: 0;
border-radius: inherit;
animation: process 1s linear forwards;
&.addGray {
background: #999 !important;
// border: 0.01rem solid #999;
}
}
}
}
@keyframes process {
0% {
left: 0;
right: 100%;
}
20% {
right: 80%;
}
40% {
right: 60%;
}
60% {
right: 40%;
}
80% {
right: 20%;
}
100% {
right: 0;
}
}
</style>
父組件調(diào)用：
<!-- 進度條 --> <Progress :addGray="inactive" :progressWidth="progressWidth"></Progress>
看看實際效果：
over;完美用css 解決了js遞歸動畫性能消耗。
到此這篇關于利用css3實現(xiàn)進度條效果及動態(tài)添加百分比的文章就介紹到這了,更多相關css3進度條添加動態(tài)百分比內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了css 實現(xiàn)圓形漸變進度條效果的示例代碼,代碼簡單易懂，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-09-24- 這篇文章主要介紹了css 橫向進度條和豎向進度條實現(xiàn)代碼,有時候看一些不錯的滾動條效果不錯，這里給大家分享一下如果用css實現(xiàn)2020-04-14
這篇文章主要介紹了使用CSS3實現(xiàn)環(huán)形進度條效果,需要的朋友可以參考下2018-06-01
這篇文章主要介紹了css 進度條的文字根據(jù)進度漸變的示例代碼，介紹了進度條里面的文字需要根據(jù)進度的長度而變化，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一2018-01-09- 這篇文章主要給大家介紹了利用CSS實現(xiàn)帶箭頭的流程進度條大方法，文中給出了詳細的示例代碼，對大家具有一定的參考價值，有需要的朋友們一起來看看吧。2017-01-22
- 這篇文章主要為大家詳細介紹了CSS進度條和訂單進度條的制作方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-07-12
- 純css做漂亮好看的進度條，看了絕對不后悔。2010-05-31
- [html] <style> #graphbox{ border:1px solid #e7e7e7; padding:10px; width:250px; background-color:#f8f8f8; margin:5px 0; } #graphbox h2{ color:#662009-03-30
僅僅使用 HTML/CSS 實現(xiàn)各類進度條的方式匯總
這篇文章主要介紹了僅僅使用 HTML/CSS 實現(xiàn)各類進度條的方式匯總,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-11-08
