How to make a progress bar with CSS

Let’s learn in this article how to make a progress bar with CSS, without using any external resources and in a simple way.

Hey you programmer, ok? Let’s learn more about CSS!

Usually when we have a task with a complex component, like a progress bar or loading bar, we go straight to ready-made solutions.

But for our joy, it is possible to get excellent results only with CSS

To create a loading bar with CSS, we will need an animation and work with keyframes

Which are CSS3 animation features, let’s see an example in practice:

<div class="container">
 <div class="progress-bar"></div>
</div>

This will be our HTML, the container will be the container of the bar, that is, the part that is not yet loaded from the loading

And the progress-bar is the bar that will load over time

See the CSS:

.container {
 height: 25px;
 background-color: #CCC;
 position: relative;
}
.container .progress-bar{
 position: absolute;
 height: 100%;
 background-color: #0fd439;
 animation: progress-animation 5s infinite;
}
@keyframes progress-animation{
 0% { width: 0%; } 
 100% { width: 100%}
}

Here we determine an area for the container, it will be the loader container, and we define the style of the progress bar in progress-bar, which is basically a background color and a height of 100% of the initial container

Then we define an animation, which will be of progress and will last for 5s, infinitely

And we assigned a keyframe to it, which will coordinate the progress of the loading bar

Check out the result: