Back

How to create a progress bar - Simple loader

A step-by-step tutorial on how to create a simple progress bar - loader.

HTML

For HTML, we need only an element for progress bar and an element for progress inside it.


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

CSS

For CSS, first we'll style the progress bar. We'll set position to relative, height to 20px and width to 300px. Then we'll set border to 2px solid blue with 15px radius. Lastly, we'll set overflow to hidden.


        .progress-bar {
            position: relative;
            height: 20px;
            width: 300px;
            border: 2px solid rgb(41, 113, 168);
            border-radius: 15px;
            overflow: hidden;
        }

Now we'll style the progress. This element will display the progress. We'll set it's position to absolute and height to 100% and width to 0. Width property displays the percentage of the progress, so you can simply set 50% width and the progress bar will display 50% progress. Now we'll set background color to the same blue we used as border for progress bar. Lastly, we'll set border to 2 pixels solid neon green, with 15 pixels radius and set box sizing to border box.


        .progress-bar .progress {
            position: absolute;
            background-color: rgb(41, 113, 168);
            width: 0px;
            height: 100%;
            border-radius: 15px;
            border: 2px solid rgb(174, 255, 0);
            box-sizing: border-box;
        }

Now we'll create an animation that increases the elements width from 0 to 100%.


        @keyframes progress {
            0% {width: 0%;}
            100% {width: 100%;}
        }

And we'll set that animation to our progress element with 3 seconds duration, infinite, ease-in-out. With the animation timing function property, you can also create a progress as steps, by setting step(number of steps) instead of ease-in-out. Detailed explanation on video below.


        .progress-bar .progress {
            position: absolute;
            background-color: rgb(41, 113, 168);
            width: 0px;
            height: 100%;
            border-radius: 15px;
            animation: progress 3s infinite ease-in-out; /*  Added animation  */
            border: 2px solid rgb(174, 255, 0);
            box-sizing: border-box;
        }

Video tutorial

You can find the video with step-by-step guide on youtube:

Whole code

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

<style>
.progress-bar {
  position: relative;
  height: 20px;
  width: 300px;
  border: 2px solid rgb(41, 113, 168);
  border-radius: 15px;
  overflow: hidden;
}
.progress-bar .progress {
  position: absolute;
  background-color: rgb(41, 113, 168);
  width: 0px;
  height: 100%;
  border-radius: 15px;
  animation: progress 3s infinite ease-in-out;
  border: 2px solid rgb(174, 255, 0);
  box-sizing: border-box;
}
@keyframes progress {
  0% {width: 0%;}
  100% {width: 100%;}
}
</style>

Thank you for reading this article.

How to create a progress bar - Simple loader

HTML

CSS

Video tutorial

Whole code

More loaders

Similar

See also