DEV Community

loading...
Cover image for How to Create a Progress Bar HTML, CSS, and JavaScript

How to Create a Progress Bar HTML, CSS, and JavaScript

hellodevworldblog profile image Hello Dev World Blog Originally published at hellodevworld.com ・4 min read

Happy day 14! For this challenge I have created a Github repo that I will post a link to below.

If you would like me to do a post on Github and how to use it let me know I am happy to do so!

Disclaimer: there are MANY ways to solve this challenge this is just my version of this challenge

TLDR: Solution is at the bottom of the post

Repo for this series: https://github.com/hellodevworldblog/progress-bar

To test your code all your have to do is go to the folder where the index.html document created is and double click it. It will open a web browser with your code. To see changes you have made save the file and refresh that page.

The Problem

Create a progress bar. This can be a pretty or as boring as you want. It will likely need HTML, CSS, and JavaScript but can be done without all 3

The Solution

This is what our progress bar is going to look like

First we need to create our html page with a container to for the progress bar (to make it pretty) and the progress bar itself.

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Progress Bar</title>
</head>

<body>
    <div class="progressBarContainer">
        <div class="progressBar"></div>
    </div>

</body>

</html>
Enter fullscreen mode Exit fullscreen mode

To center our progress bar on the page we are going to add styling to the body

    body {
        display: flex;
        justify-content: center;
        align-items: center;
    }
Enter fullscreen mode Exit fullscreen mode

Now to make the container a little nicer so we don’t have just a progress bar on a page with nothing around it.

Position relative makes the position of the element relative to itself. It is not relative to any other elements on the page and will not affect any other elements on the page.

The padding will give it space around the progress bar so you will see the grey around the progress bar.

Border-radius will give the ends a round corner instead of a sharp one. This is what will make the shape more of a rounded rectangle rather than a box.

    .progressBarContainer {
        height: 15px;
        padding: 5px;
        width: 50%;
        border-radius: 20px;
        position: relative;
        background: lightgray;
    }
Enter fullscreen mode Exit fullscreen mode

Now we need to make our progress bar pretty!

To make the gradient I used css gradient it is a great site to create a gradient and it will spit out the css for it. Gradients can be a pain and this site is magical.

Everything else should look familiar.

    .progressBar {
        display: block;
        border-radius: 20px;
        height: 15px;
        background: rgb(131, 58, 180);
        background: linear-gradient(90deg, rgba(131, 58, 180, 1) 0%, rgba(253, 29, 29, 1) 50%, rgba(252, 176, 69, 1) 100%);
        position: relative;
    }
Enter fullscreen mode Exit fullscreen mode

Making the pretty stripes to go over the progress bar is a little more complicated.

z-index will change what layer of the page this class is and will make this class the top layer of the page. By not setting any others and setting this to one it will be the top layer. if there were another class set to 2 that would be the top layer, etc. etc.

Position absolute will make all the positioning relative to its parent which is the progressBarContainer.

everything else should look familiar. This is loosely based on this post that has some more examples of progress bars.

    .progressBar:after {
        content: "";
        z-index: 1;
        position: absolute;
        width: 100%;
        height: 100%;
        background: linear-gradient( 135deg, rgba(206, 204, 204, 0.445) 25%, transparent 25%, transparent 50%, rgba(206, 204, 204, 0.445) 50%, rgba(206, 204, 204, 0.445) 75%, transparent 75%, transparent);
        background-size: 40px 40px;
    }
Enter fullscreen mode Exit fullscreen mode

This script is just to make the progress bar move rather than be static and give and example of how you would maybe set the progress width if you were to implement it in real life. The interval is just to make it increment this is not something you would really use in practice.

<script>
    const elem = document.getElementsByClassName("progressBar")[0];
    let width = 1;
    let id = setInterval(frame, 100);

    function frame() {
        if (width >= 100) {
            clearInterval(id);
        } else {
            width++;
            elem.style.width = width + "%";
            elem.text(width + "% Complete");
        }
    }
</script>
Enter fullscreen mode Exit fullscreen mode

This is what the whole file looks like

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Progress Bar</title>
</head>

<body>
    <div class="progressBarContainer">
        <div class="progressBar"></div>
    </div>

</body>

</html>
<style>
    body {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .progressBarContainer {
        height: 15px;
        padding: 5px;
        width: 50%;
        border-radius: 20px;
        position: relative;
        background: lightgray;
    }

    .progressBar {
        display: block;
        border-radius: 20px;
        height: 15px;
        background: rgb(131, 58, 180);
        background: linear-gradient(90deg, rgba(131, 58, 180, 1) 0%, rgba(253, 29, 29, 1) 50%, rgba(252, 176, 69, 1) 100%);
        position: relative;
    }

    .progressBar:after {
        content: "";
        z-index: 1;
        position: absolute;
        width: 100%;
        height: 100%;
        background: linear-gradient( 135deg, rgba(206, 204, 204, 0.445) 25%, transparent 25%, transparent 50%, rgba(206, 204, 204, 0.445) 50%, rgba(206, 204, 204, 0.445) 75%, transparent 75%, transparent);
        background-size: 40px 40px;
    }
</style>
<script>
    const elem = document.getElementsByClassName("progressBar")[0];
    let width = 1;
    let id = setInterval(frame, 100);

    function frame() {
        if (width >= 100) {
            clearInterval(id);
        } else {
            width++;
            elem.style.width = width + "%";
            elem.text(width + "% Complete");
        }
    }
</script>
Enter fullscreen mode Exit fullscreen mode

I hope you had fun with this one! Please leave your repo links to your form in the comments section. Also let me know if you like the multi day challenges or really hate them! If you have any challenge you would like to see done also leave that in the comments below you may see it come up! If you would like to get the challenge emailed to you every day in morning and a notification when the solution is posted subscribe here.

Discussion (0)

pic
Editor guide