This article will show you how to use HTML/CSS to create a variety of basic and fancy progress bars and their animations. Through this article, you may learn:
- Through HTML tags
<meter>Creating a Progress bar - Through HTML tags
<progress>Creating a Progress bar - Limitations of HTML implementation progress bar
- Create a normal progress bar and animate it using CSS percentages and gradients
- Create a circular progress bar using the CSS
- Create a spherical progress bar using CSS
- Create a 3D progress bar using CSS
The progress bar is one of the many things we use in our daily interface. Let’s take a look at it. How can we implement the progress bar today?
HTML tag — Meter & Progress
HTML5 natively provides two tags
<meter>: used to display scalar or fractional values of a known range<progress>: displays the progress of a task. Normally, this element is displayed as a progress bar
Let’s look at them separately, starting with the
<p>
<span>Finish:</span>
<meter min="0" max="500" value="350">350 degrees</meter>
</p>
Copy the codemeter {
width: 200px;
}
Copy the codeThe style is as follows:
Min, Max, and value indicate the maximum value, minimum value, and current value respectively.
Similarly, let’s look at the use of the
<p>
<label for="file">Finish:</label>
<progress max="100" value="70"> 70% </progress>
</p>
Copy the codeprogress {
width: 200px;
}
Copy the codeThe style is as follows:
Where, the Max attribute describes how much work is required for the task represented by the progress element, and the value attribute specifies how much work has been completed for the progress bar.
Differences between Meter & Progress
So the question is, from the Demo above, they look exactly the same, so what’s the difference between them? Why are there two labels that look the same?
The biggest difference between these two elements is semantic.
<meter>Said:A scalar measurement or fractional value in a given range<progress>Said:Progress of task completion
For example, a request for the current degree of completion would use
Limitations of Meter & Progress
Of course, in real business requirements, or production environments, you will almost never see the
Similar to the reasons we discussed in this article, Implementing filterable drop-down boxes with Datalist, are:
- We can’t modify it effectively
<meter>和<progress>Label styles, such as background color, foreground color, etc. And, most fatally, the browser default style doesn’t behave consistently across browsers. This is a disastrous disadvantage for businesses that seek stability and consistent UI performance! - We can not add some animation effects, interactive effects, because some actual application scenarios, certainly not simply show a progress bar
Use CSS to achieve progress bar
Therefore, at this stage, more or use some CSS way to achieve the progress bar.
Implement the progress bar using percentages
One of the most common ways is to make progress bars using a background color and percentage.
The simplest DEMO:
<div class="g-container">
<div class="g-progress"></div>
</div>
Copy the code.g-container {
width: 240px;
height: 25px;
border-radius: 25px;
background: #eee;
}
.g-progress {
width: 50%;
height: inherit;
border-radius: 25px 0 0 25px;
background: #0f0;
}
Copy the codeThe effect is as follows:
The advantage of this approach is that it is easy to use and the actual progress can be easily passed into the CSS
- Use HTML
styleProperties are filled in completelywidthValues, such as<div class="g-progress" style="width: 50%"></div> - Or use CSS to customize properties
<div class="g-progress" style="--progress: 50%"></div>In the actual CSSwidth: var(--progress) - Fully custom style, and easy to add auxiliary rich animation and interactive effects
For example, add a transition effect to G-Progress:
.g-progress{/ /...transition: width .2s linear;
}
Copy the codeIn this way, each progress change is a dynamic transition process:
Alternatively, change background #0f0 to background: Linear-gradient (90deg, #0f0, # 0FF) :
Single tags are implemented using gradients
Of course, as you can see, we used the two-tag structure above:
<div class="g-container">
<div class="g-progress"></div>
</div>
Copy the codeTo be stingy, we can also do this with just one tag, mainly using gradients:
<div class="g-progress"></div>
Copy the code.g-progress {
width: 240px;
height: 25px;
border-radius: 25px;
background: linear-gradient(90deg.#0f0.#0ff 70%, transparent 0);
border: 1px solid #eee;
}
Copy the codeThe results are as follows:
Similarly, we can use the HTML style attribute to complete the background value to pass the actual percentage, of course, it is recommended to use CSS custom attributes:
<div class="g-progress" style="--progress: 50%"></div>
Copy the code.g-progress {
background: linear-gradient(90deg.#0f0.#0ff var(--progress), transparent 0);
}
Copy the codeIf you’re familiar with CSS, you’ll notice that when you change the value of –progress, even if you add transition to.g-progress, you don’t animate it.
The reason is that gradients (such as Linear-gradinet, radial-gradient and Conic-gradient) do not support transition transformation in CSS.
So, in order to animate, we can modify our code with CSS @Property:
<div class="g-progress" style="--progress: 70%"></div>
Copy the code@property --progress {
syntax: '<percentage>';
inherits: false;
initial-value: 0%;
}
.g-progress {
margin: auto;
width: 240px;
height: 25px;
border-radius: 25px;
background: linear-gradient(90deg.#0f0.#0ff var(--progress), transparent 0);
border: 1px solid #eee;
transition:.3s --progress;
}
Copy the codeUsing CSS @property, we can animate a single tag as well:
CodePen Demo – Single TAB progress bar effect
If you don’t know CSS @property, you can read my article CSS @ Property to make the impossible possible
Of course, not only the percentages and gradients mentioned above can be used to achieve the most common progress bar. In fact, all the methods that can achieve length changes can be used to achieve progress bar, including but not limited to:
- Width (it is more straightforward to use percentages for width)
- Gradient (the value of the percentage of transition points that control the gradient)
- The gradient of the
background-size transfrom: scale()(Scaling can also change the width)clip-pathBy cutting- . (And so on and so on)
I’m not going to expand here.
Circular arc progress bar
Of course, the progress bar can’t just be straight. There are many other types, but let’s start with the arc-shaped progress bar.
Today, we can use CSS to quickly create arc-shaped progress bars like this:
Background: conic-gradient() :
<div class="g-progress"></div>
Copy the code.g-progress {
width: 160px;
height: 160px;
border-radius: 50%;
background: conic-gradient(#FFCDB2 0.#FFCDB2 25%.#B5838D 25%.#B5838D);
}
Copy the codeUsing the angular gradient background: Conic-gradient (), we can easily achieve such a pie chart:
Next is the hollow out in the middle.
The traditional idea is to superimpose a circle in the middle, but one of the great disadvantages of this is that it doesn’t work if our background is not a solid color but a gradient, like this:
So how to hollow out the middle, make the middle part transparent? Here we can achieve the goal through the mask attribute skillfully, hollow out the middle:
.g-progress {
background: conic-gradient(#FFCDB2 0.#FFCDB2 25%.#B5838D 25%.#B5838D);
+ mask: radial-gradient(transparent, transparent 50%.# 000 50%.# 000 0);
}
Copy the codeIn this way, we can easily hollow out the middle, even if the background is not a solid color.
CodePen Demo – Angular gradient to achieve circular progress bar
Based on this extension, multi-color arc-shaped progress bar can also be realized:
.g-progress { width: 160px; height: 160px; border-radius: 50%; mask: radial-gradient(transparent, transparent 50%, #000 51%, #000 0); background: Conic-gradient (#FFCDB2 0, #FFCDB2 25%, #B5838D 25%, #B5838D 50%, # 673AB7 50%, # 673AB7 90%, # FF5722 90.2%, #ff5722 100% ); }Copy the codeOf course, this might be less like a progress bar, more like a pie chart, right?
Angular gradient to achieve the limitations of the arc progress bar
Of course, there are two drawbacks to this approach.
- Of course, if the percentage of progress is not a number like 0°, 90°, 180°, 270°, or 360°, there will be obvious jagged edges between colors when using angular gradients.
Here is an example of conic-gradient(#FFCDB2 0, #FFCDB2 27%, #B5838D 27%, #B5838D) :
The solution to this problem is to leave some space for gradient at the junction. Let’s simply change the above angular gradient code:
{-background: conic-gradient(#FFCDB2 0.#FFCDB2 27%.#B5838D 27%.#B5838D)`
+ background: conic-gradient(#FFCDB2 0.#FFCDB2 27%.#B5838D 27.2%.#B5838D)`
}
Copy the codeTake a closer look at the code above and change a change from 27% to 27% to 27.2%. This extra 0.2% is the actual effect of the change to eliminate aliasing:
Specific use of the use, you can select more debugging will not see blurred, and as far as possible to eliminate a range of jagged amplitude.
- It is more difficult to realize the circular arc progress bar with a circular beginning and end
In another case, in actual use, an arc progress bar with a circle at the beginning and end is required, as shown in the following figure:
Of course, this situation can be solved by making the progress bar a solid color by superimposing two small circles at the beginning and end.
If the progress bar is gradient, this progress bar needs to be implemented using SVG/Canvas.
CodePen Demo – the circular arc progress bar with rounded corners
Spherical progress bar
Spherical progress bars are also common, similar to the following:
For the spherical bar, the core is to use CSS to achieve the wavy effect in the middle.
This technique should be familiar by now, but without further elaboration, a picture is worth a thousand words, and you can use a scrolling large circle, something like this:
The container applies Overflow: Hidden to get something like this:
If you don’t understand this trick, just click on this article: Wave effect with PURE CSS!
To apply this technique, a simple encapsulation is required, controlling the height of the wave when the spherical container represents 0-100% progress. We can get anywhere from 0% to 100% animation.
The complete code looks like this:
<div class="container">
<div class="wave-change"></div>
<div class="wave"></div>
</div>
Copy the code.container {
width: 200px;
height: 200px;
border: 5px solid rgb(118.218.255);
border-radius: 50%;
overflow: hidden;
}
.wave-change {
position: absolute;
width: 200px;
height: 200px;
left: 0;
top: 0;
animation: change 12s infinite linear;
&::before,
&::after{
content: "";
position: absolute;
width: 400px;
height: 400px;
top: 0;
left: 50%;
background-color: rgba(255.255.255.6);
border-radius: 45% 47% 43% 46%;
transform: translate(-50%, -70%) rotate(0);
animation: rotate 7s linear infinite;
z-index: 1;
}
&::after {
border-radius: 47% 42% 46% 44%;
background-color: rgba(255.255.255.8);
transform: translate(-50%, -70%) rotate(0);
animation: rotate 9s linear -4s infinite;
z-index: 2; }}.wave {
position: relative;
width: 200px;
height: 200px;
background-color: rgb(118.218.255);
border-radius: 50%;
}
p {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 36px;
color: # 000;
z-index: 10;
}
@keyframes rotate {
to {
transform: translate(-50%, -70%) rotate(360deg); }}@keyframes change {
from {
top: 80px;
}
to {
top: -120px; }}Copy the code
For the full code example, you can poke here:
- CodePen Demo — Pure Css Wave Progress bar
- CodePen Demo — Pure Css Wave Progress bar Animation
3 d progress bar
Well, the following 3D progress bar requires a basic understanding of CSS 3D.
You can first take a look at this article | – ideas CSS 3 d animation can only use CSS to produce many amazing animation?
It relies on a 3D cube. Let’s implement a cube progress bar
First, implement a cube with the following structure:
<div class="demo-cube perspective">
<ul class="cube">
<li class="top"></li>
<li class="bottom"></li>
<li class="front"></li>
<li class="back"></li>
<li class="right"></li>
<li class="left"></li>
</ul>
</div>
Copy the code
We can imagine this cube as a three-dimensional progress bar container. By controlling the colors of the six sides, we can skillfully obtain a 3D progress bar effect.
Of course, in fact, we don’t need so many sides, just 4 sides, remove the left and right sides, and then use the gradient to modify the color of each side of the cube, remove the border, the core CSS code is as follows:
.demo-cube {
position: relative;
.cube {
position: absolute;
top: 50%;
left: 50%;
width: 300px;
height: 100px;
transform-style: preserve-3d;
transform: translate(-50%, -50%) rotateX(-33.5 deg);
li {
position: absolute;
width: 300px;
height: 100px;
background: linear-gradient(90deg.rgba(156.39.176.3), rgba(255.34.109.8) 70%.rgba(255.255.255.6) 70%.rgba(255.255.255.6));
}
.top {
transform: rotateX(90deg) translateZ(50px);
}
.bottom {
transform: rotateX(-90deg) translateZ(50px);
}
.front {
transform: translateZ(50px);
}
.back {
transform: rotateX(-180deg) translateZ(50px); }}}Copy the codeWe get a pretty cool 3D progress bar:
Animate the 3D progress bar using CSS Property
Of course, the progress bar needs a fill animation. Since we are using a gradient to achieve the progress of the progress bar, we need to control the color percentage change.
Normally, CSS doesn’t support gradient animation, but that’s not too hard to do because we can use CSS @property.
Modify the code briefly:
@property --per {
syntax: '<percentage>';
inherits: false;
initial-value: 0%;
}
.demo-cube .cube {
.top..front..bottom..back {
background: linear-gradient(90deg.rgba(255.217.34.6), rgba(255.34.109.8) var(--per), rgba(255.34.109.1) var(--per), rgba(255.34.109.1));
animation: perChange 6sinfinite; }}@keyframes perChange {
0% {
--per: 0%;
}
90%.to {
--per: 80%; }}Copy the codeNow we have a moving 3D progress bar, just by controlling the per CSS custom property, which looks like this:
For CSS @Property is not very understanding, you can look at the author of this article – CSS @Property, so that the impossible is possible, its emergence, so that CSS greatly improved the ability to make all kinds of animation.
For the complete code above, you can click here: CSS-inspired — 3D Cube progress bar
Stretch out in all directions
This article introduces the step-by-step way to build a progress bar using HTML/CSS, from simple to complex, and gradually increases the difficulty.
Of course, the more difficult it gets, the cooler the progress bar gets.
Based on the above method introduction, we can basically evolve a variety of progress bars we need. For example, based on the above method, a simple battery charging animation can be implemented:
Of course, CSS is ever-changing, and the types of progress bars are certainly not limited to the above categories. For example, we can use filters to achieve the imitation of Huawei mobile phone charging animation, which is also a way of progress bar presentation, and can be achieved using pure CSS:
The full implementation of the above effects can be used to achieve cool charging animations using CSS skillfully
Alternatively, we can work with the texture of the progress bar:
Effect from CodePen — Bars By Lucagaz.
All in all, the beautiful world of CSS is worth exploring.
The last
Well, that’s the end of this article, I hope you found it helpful 🙂
Want to Get the most interesting CSS information, do not miss my public account – iCSS front-end interesting news 😄
More interesting CSS technology articles are summarized in my Github — iCSS, constantly updated, welcome to click on the star subscription favorites.
If there are any questions or suggestions, you can exchange more original articles, writing is limited, talent and learning is shallow, if there is something wrong in the article, hope to inform.