EPeak Daily

The right way to create a Customized Progress Bar

0 8

Initially revealed on www.florin-pop.com

(function ($) { var bsaProContainer = $('.bsaProContainer-6'); var number_show_ads = "0"; var number_hide_ads = "0"; if ( number_show_ads > 0 ) { setTimeout(function () { bsaProContainer.fadeIn(); }, number_show_ads * 1000); } if ( number_hide_ads > 0 ) { setTimeout(function () { bsaProContainer.fadeOut(); }, number_hide_ads * 1000); } })(jQuery);

The theme for week #14 of the Weekly Coding Problem is:

Progress Bar

A progress bar is used to point out how far a consumer motion continues to be in course of till it is accomplished. A very good instance is a obtain progress bar which exhibits you the way a lot of the file is downloaded already (or it is also an add progress bar for those who add information 🙂).

On this article we will construct this type of a Progress Bar:


For the HTML construction we’d like two issues:

  1. a container which can show the whole size (100%) of the progress bar – .progress-bar
  2. the precise progress ingredient which can mainly observe the present progress (e.g. 20%) – .progress
<div class="progress-bar">
    <div data-size="20" class="progress"></div>

As you may see the .progress div has a data-size attribute. This will probably be utilized in JavaScript to really set the width of the progress. You may see in a second what I imply, however first let’s fashion these two parts. 😄


.progress-bar {
    background-color: #fefefe;
    border-radius: 3px;
    box-shadow: Zero 1px 3px rgba(0, 0, 0, 0.2);
    margin: 15px;
    peak: 30px;
    width: 500px;
    max-width: 100%;

.progress {
    background: #advert5389;
    background: -webkit-linear-gradient(to backside, #3c1053, #advert5389);
    background: linear-gradient(to backside, #3c1053, #advert5389);
    border-radius: 3px;
    peak: 30px;
    width: 0;
    transition: width 0.5s ease-in;

Few issues to notice relating to the above CSS:

  1. each parts are rectangles which have the identical peak (30px) and the identical border-radius
  2. initially the .progress width it set to 0 and we’ll replace this within the JavaScript code under
  3. additionally the .progress has a pleasant linear-gradient from uiGradients
  4. the transition added to the .progress is used to create a pleasant animation when the worth of it is data-size attribute is dynamically modified

The JavaScript

For this we’ll have to loop over all of the .progress parts (in our instance is just one, however you may add a number of ones in an app) to get their data-set worth and to set it as their width. We’ll use proportion (%) on this case.

const progress_bars = doc.querySelectorAll('.progress');

progress_bars.forEach(bar => {
    const { measurement } = bar.dataset;
    bar.fashion.width = `${measurement}%`;

We’re utilizing a bit little bit of Object Destructuring.

const { measurement } = bar.dataset

is similar as:

const measurement = bar.dataset.measurement

however you would possibly know that already 😉.


There are a number of issues you could possibly do to enhance this part. A few of that are:

  1. Add a number of shade variants through completely different lessons
  2. Add the share worth
  3. Make it animate dynamically by altering the scale worth.

I hope you loved it and be sure you share with me what you are creating!

Completely satisfied Coding! 😇

Supply hyperlink

Leave A Reply

Hey there!

Sign in

Forgot password?

Processing files…