Tutorial - Create Rainbow Progress Bar

June 12, 2020

#CSS #Tutorial

Today we’re going to create stunning colored progress bar ! 🦄

Prerequisites

Goal

Let’s see some output examples :

You can play with colors !

Or maybe with dimensions

Let’s start !

Create a new html file and create two div elements:

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

The father div will be the container so we can add a container class.
The child element will be our fast progress indicator, so let’s add the progress-bar class.

Now we can define the css classes. You can put them in a separated css file and then include it in your html, or you can put them inside the html file by wrapping them into <style> </style> tags.

The container will be the dark box that I’m using in the examples above, but you can of course choose your favorite color.

.container {

  width: 100%;
  height: 5px;

  background-color: #222;
  position: relative;
  overflow: hidden;
  border-radius: 15px;

}

Our empty container will look like this:

You can notice that I put the property :

overflow: hidden;

This property will be the key to hide the progress bar and simulate the entrance from the left side of the page and the exit from the right side.

We can style the progress bar without any animation to better understand what is going to happen :

.progress-bar {
    position: absolute;
    width: 10%;
    height: 100%;

    background: linear-gradient(to right, #000000 0%, #926E64 11%, #FFB6E6 22%, #A3DEFF 33%, #FFFFFF 44%, #FF0000 55%, #FFE462 66%, #0ACF83 77%, #1ABCFE 88%, #A259FF 100%);

    /* We're going to put the animation here later */
}

and it will look like this:

In order to have a smooth effect, our progress bar will increase its width while moving and then decrease before ending to simulate a brake effect.

Finally, let’s give it some moves!

.progress-bar {
    position: absolute;
    width: 10%;
    height: 100%;
    background: linear-gradient(to right, #000000 0%, #926E64 11%, #FFB6E6 22%, #A3DEFF 33%,
     #FFFFFF 44%, #FF0000 55%, #FFE462 66%, #0ACF83 77%, #1ABCFE 88%, #A259FF 100%);

    animation: indeterminate 2s linear 1s infinite;
}

@keyframes indeterminate {
  0% {
    left: -100%;
    width: 20%
  }
  25% {
    width: 40%
  }
  50% {
    width: 60%
  }
  75% {
    width: 40%
  }
  100% {
    left: 100%;
    width: 30%;
  }
}

The property animation: indeterminate 2s linear 1s infinite is a shortcut for:

  • The animation name: ‘indeterminate’
  • The duration: 2s ( If you want a slower progress bar you have to increase it and vice versa )
  • The timing function : ‘Linear’ ( The animation has the same speed from start to end )
  • The delay: 1s
  • The iteration count : ‘infinite’

The animation @keyframes indeterminate will move the progress-bar from the left of the container to the right thanks to its absolute position:

  • It starts from left: -100% (please note the minus !) and then it runs to the right with left: 100%.
  • It will grow up to 50% and then it will decrease to create a smooth effect

In the examples below I will you show what I mean with “smooth effect” and I will slow down the animation to highlight the differences:

Without the “increase-decrease” effect:

With the effect applied:

Hope you enjoy this tutorial,

Pingu 🐧


Written by Pingu who lives and works in Genoa building useful modern applications.

Something to share ?