Create a simple progress bar with HTML5


Two weeks ago our small team started to collaborate through our handmade kanban, which works well so far, and it has helped us to have a clear focus, efficient output and great cycle time. One of the most complex cards for this week included creating some nice progress bars, so I decided to share how I built them with HTML5.

Feel free to try it yourself and include them in your next project! It could enhance the user experience while waiting for a complete task!

1- HTML5 progress element

The first step in the HTML document is to add the HTML5 progress element <progress>. You should specify the max attribute, which is the maximum value when a task is finished, and the value, which is the current status of the progress bar. Find out more details about this element in css-tricks.

<div class="wrapper-bar">
   <progress class="progress-bar" value="60" max="100"></progress>
   <p class="progress-value">60%</p>
</div>

2- CSS styles

To change the appearance of the progress bar, let’s add some CSS styles. You can include display, width, height, border and border-radius properties. In this example I set -webkit-appereance to none, in order to reset the default styles  (see .wrapper-bar progress).

To style the progress bar container, it’s necessary  to set -webkit-progress-bar pseudoclass. In this case, I set the background, padding and `border-radius properties.

.wrapper-bar {
  margin-top: 50px;
  text-align: right;
  font-family: "Helvetica", sans-serif;
  font-size: 12px;
  color: #aaa;
  padding: 10px;
}

.wrapper-bar p {
  padding: 10px 0;
}

.wrapper-bar progress {
  display: block;
  width: 100%;
  height: 20px;
  border: none;
  border-radius: 100px;
  -webkit-appearance: none;
}

/* Style the background */
.wrapper-bar progress::-moz-progress-bar {
  background-color: #333;
  padding: 3px;
  border-radius: 100px;
}

.wrapper-bar progress::-webkit-progress-bar {
  background-color: #333;
  padding: 3px;
  border-radius: 100px;
}

3- Add some animation to the progress value

Now, let’s add some effect to the value inside the progress bar. So, we’ll need the -webkit-progress-value pseudoclass. You’ll notice that I set a linear gradient effect and an animation too.

.wrapper-bar progress::-webkit-progress-value { 
  border-radius: 50px;

  /* Set background color of the gradient */
  background-color: #36D7B7;

  /* Set size of the square */
  background-size: 15px 15px;

  /*0% - 25% - start with some transparence rgba(255,255,255,.2), 
    25% - 50% - transparent, which is the background color set,
    50% - 75% - rgba(255,255,255,.2),
    75% - 100% - transparent, which is the background color set.*/

background-image: linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent 100%); 
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent 100%);  
background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent 100%);  
background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent 100%); 

/* Apply animation */
-webkit-animation: animation 4s linear infinite;
   -moz-animation: animation 4s linear infinite; 
    -ms-animation: animation 4s linear infinite;
     -o-animation: animation 4s linear infinite;
        animation: animation 4s linear infinite;
}

4- Keyframe animation

Finally, add the keyframe animation using vendor prefixes. I named it “animation”, 0% and 100%, indicate the starting and ending states of the animation.  Learn more about the keyframe animation syntax in css-tricks.

/* Keyframe animation */

@-webkit-keyframes animation {
  0% { background-position: 0px 0px; }
  100% { background-position: 200px 0px; }
}
@-moz-keyframes animation {
  0% { background-position: 0px 0px;  }
  100% { background-position: 200px 0px;  }
}
@-ms-keyframes animation {
  0% { background-position: 0px 0px;  }
  100% { background-position: 200px 0px;  }
}
@-o-keyframes animation {
  0% { background-position: 0px 0px;  }
  100% { background-position: 200px 0px;  }
}

@keyframes animation {
  0% { background-position: 0px 0px;  }
  100% { background-position: 200px 0px;  }
}

I’m really enjoying the learning process that this kanban flow facilitates!

View this live example. image

Related Posts