How to achieve progress bar effect in css3
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:
<!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%"> // child的百分比就是进度条的占比效果
<p class="process-animate"></p>
</p>
</p>
</body>
</html>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):
<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 + "%"; //动态改变进度条
// 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就是动态变化。通过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>Parent component call:
<!-- 进度条 --> <Progress :addGray="inactive" :progressWidth="progressWidth"></Progress>
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!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
How to achieve wave effect with pure CSS3? (code example)
Jun 28, 2022 pm 01:39 PM
How to achieve wave effect with pure CSS3? This article will introduce to you how to use SVG and CSS animation to create wave effects. I hope it will be helpful to you!
Use CSS skillfully to realize various strange-shaped buttons (with code)
Jul 19, 2022 am 11:28 AM
This article will show you how to use CSS to easily realize various weird-shaped buttons that appear frequently. I hope it will be helpful to you!
How to set the color of a progress bar using HTML and CSS?
Sep 19, 2023 pm 08:25 PM
In website development, progress bars are an important part of the website. The progress bar shows the progress of the process. With the help of it, users can see the status of the work being done on the website, including load times, file uploads, file downloads, and other similar tasks. By default, it is gray. However, to make progress bars stand out and be visually appealing, you can use HTML and CSS to change their color. What is a progress bar? A progress bar is used to show the progress of a task. It is a graphical user interface element. It basically consists of a horizontal bar that gradually fills in as the task progresses, accompanied by a percentage value or other completion indicator. Progress bars are used in web applications to provide users with information about completing a process such as file upload, file download, or software installation.
How to hide elements in css without taking up space
Jun 01, 2022 pm 07:15 PM
Two methods: 1. Using the display attribute, just add the "display:none;" style to the element. 2. Use the position and top attributes to set the absolute positioning of the element to hide the element. Just add the "position:absolute;top:-9999px;" style to the element.
How to implement page loading progress bar function in JavaScript?
Oct 27, 2023 am 08:57 AM
How does JavaScript implement the page loading progress bar function? In modern Internet applications, page loading speed is one of the key factors of user experience. To show users the loading process, many websites and applications use loading progress bars. JavaScript provides a simple and effective way to implement the page loading progress bar function. The specific implementation process is as follows: Create an HTML structure. First, create an HTML structure of a progress bar at a suitable location on the page. It is common to place the progress bar in
How to implement lace borders in css3
Sep 16, 2022 pm 07:11 PM
In CSS, you can use the border-image attribute to achieve a lace border. The border-image attribute can use images to create borders, that is, add a background image to the border. You only need to specify the background image as a lace style; the syntax "border-image: url (image path) offsets the image border width inward. Whether outset is repeated;".
How to use Vue to implement progress bar effects
Sep 19, 2023 am 09:22 AM
How to use Vue to implement progress bar effects The progress bar is a common interface element that can be used to display the completion of a task or operation. In the Vue framework, we can implement special effects of the progress bar through some simple code. This article will introduce how to use Vue to implement progress bar effects and provide specific code examples. Create a Vue component First, we need to create a Vue component to implement the progress bar function. In Vue, components are reusable and can be used in multiple places. Create a file called Pro
How to enlarge the image by clicking the mouse in css3
Apr 25, 2022 pm 04:52 PM
Implementation method: 1. Use the ":active" selector to select the state of the mouse click on the picture; 2. Use the transform attribute and scale() function to achieve the picture magnification effect, the syntax "img:active {transform: scale(x-axis magnification, y Axis magnification);}".
