Simple Progress Bar

Sun Dec 30 2018

Progress bar can be used in some cases, one of which is often used is to tell the file upload progress. From UX side, progress bar help your users know that your system is still running while doing something on the background. Checkout the Demo.

There are many ways to create progress bar, this time we will show you how to create progress bar using 2 divs. We can break down our progress bar into the container and the progress bar itself.

Container

We can use div as the container of the progress bar, set some height and width and also background color. Here’s our container code:

.container {
  width: 200px;
  height: 8px;
  background-color: grey;
  margin-bottom: 14px;
}

Progress

We just need to set the height to 100% and width 50% , so we can see when our progress bar is ready. Make sure to use different background color than the container. Set transition to width with 0.05s time to make smoother progress transition.

.progress-bar {
  width: 76%;
  height: 100%;
  background-color: black;
  transition: width 0.05s;
}

Animation

To update the percentage of our progress, we only need to change the width of the progress class.

var x = 75 // x is the percentage
document.querySelector('.progress-bar').style.width = x + '%'

That’s it! You have just build your own progress bar, easy right? Demo