Build A Simple Progress Bar

You might get this as an interview question for web development roles, especially front-end roles. I'll explain how you can ace it by creating a progress bar in minutes.

Spoiler: You could do it under a minute with CSS ;)

Step 1: Create the structure

Create the progress bar with plain HTML and CSS as follows:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Progress Bar Tutorial</title>
    <style>
        .progress-bar-wrapper {
            width: 500px;
            height: 50px;
            background-color: #D5C67A;
            margin: 20px 0;
        }
        .progress-bar {
            height: 100%;
            width: 0%;
            background-color: #06A77D;
        }
    </style>
</head>
<body>
    <div class="progress-bar-wrapper">
        <div class="progress-bar"></div>
    </div>
    <button onclick="load_something(1)">Load</button>
</body>
</html>

This results in the following empty progress bar:

You can already test it by manually increasing the width from 0% to 10% and so on!

There's a button in there which will trigger the function load_something(1) and pass seconds as value. In this case we are passing 1 second as the value.

We'll create that function in the next step.

Step 2: Add JavaScript

Add the following JS code before the closing body tag:

<script>
    function load_something(seconds) {
        const progress_bar = document.querySelector('.progress-bar')
        let percent = 0
        const interval = setInterval(() => {
            percent += 1
            progress_bar.style.width = percent + '%'
            if (percent > 100) {
                clearInterval(interval)
            }
        }, (seconds * 1000)/100);
    }
</script>

This load_something function will perform the following steps:

Select the element with the progress-bar class.
Set percent to 0.
Create an interval which repeats every seconds/100. In each iteration it will set the width of the progress bar based on the value in percent and then increase the percent value by 1.
It will clear this interval only when percent is greater than 100.

Here's what that looks like:

Step 3: Do it with CSS

What if I tell you we can avoid the second step completely by using CSS? Here's how –

<script>
    function load_something(seconds) {
        const progress_bar = document.querySelector('.progress-bar')
        progress_bar.style.transition = `${seconds}s linear width`
        progress_bar.style.width = '100%'
    }
</script>

This will achieve the same result but I personally prefer this one as it is much cleaner and done with CSS (instead of intervals which can be a bit messy).

Let me know what you think about this in the comments.

Blog

Build A Simple Progress Bar

Omkar Bhagat

Step 1: Create the structure

Step 2: Add JavaScript

Step 3: Do it with CSS

Join Our Newsletter. No Spam, Only the good stuff.

Related