
During the project process, I began to use the requestAnimationFrame method of js to implement the progress bar, but it greatly affected the performance when there was a lot of data, so I switched to css to implement and optimize it.
Post the code first:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | <!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>
<p class = "box" >
<p class = "child" style= "width:50%" >
<p class = "process-animate" ></p>
</p>
</p>
</body>
</html>
|
Copy after login
Effect picture (copy the code to see the dynamic effect):

Under normal circumstances, the percentage must be It is calculated based on the background data, so it is passed in dynamically. The vue code is posted below
Progress bar subcomponent (progress.vue):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 | <template>
<p class = "process-wrapper" : class = "{'addGray':addGray}" >
<p class = "process-child" ref= "processChild" >
<p class = "process-animate" : class = "{'addGray':addGray}" ></p>
</p>
</p>
</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 + "%" ;
});
}
};
</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%;
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;
}
}
}
}
@keyframes process {
0% {
left: 0;
right: 100%;
}
20% {
right: 80%;
}
40% {
right: 60%;
}
60% {
right: 40%;
}
80% {
right: 20%;
}
100% {
right: 0;
}
}
</style>
|
Copy after login
Parent component call:
1 2 | <!-- 进度条 -->
<Progress :addGray= "inactive" :progressWidth= "progressWidth" ></Progress>
|
Copy after login
Look at the actual effect:

Recommended tutorial: "CSS Tutorial"
The above is the detailed content of How to achieve progress bar effect in css3. For more information, please follow other related articles on the PHP Chinese website!