How To Create A Progress Bar With CSS Just In 2 Minutes

In this article, we will learn to create progress bars using HTML and CSS. A progress bar is created by using two HTML “div”, the container (parent div), and the skill (child div) as shown in the following examples.

We will divide the article into two coding sections, in the first section we will work on HTML, and in the second section will design that progress bar.

The bar is an important element in the web, the progress bar can be used for downloading, marks obtained, skill measuring unit, etc. To create a progress bar we can use HTML and CSS.

bars usually include a numerical (percentage) and animated representation of the progress. This improves the clarity of the progress bar, adding to the user experience. This is why CSS progress bars are so valuable to UX/UI designers and developers.

Html + CSS + JavaScript code

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS Progress Bar Example</title>

    <style>
      .progress-bar {
        height: 24px;
        width: 360px;
        border-radius: 10px;
        background-color: lightblue;
        margin: 50px;
      }

      .progress-bar > div {
        width: 0%;
        height: 100%;
        border-radius: 10px;
        background-image: linear-gradient(to right, lightskyblue, blue);
        background-size: 360px 100%;
        transition: width 200ms;
      }
    </style>
  </head>
  <body>
    <div class="progress-bar">
      <div></div>
    </div>

    <script>
      setInterval(myTimer, 1000);

      function myTimer() {
        console.log("Interval event");
        const pb = document.querySelector(".progress-bar > div");
        let progress = parseInt(pb.style.width, 10);
        console.log("Widht Before: " + progress);
        if (progress < 100) {
          progress = progress + 10;
        } else {
          progress = 0;
        }
        console.log("Widht After: " + progress);
        pb.style.width = progress + "%";
      }
    </script>
  </body>
</html>

Step 1: Create A New File index.html

Let’s start in the first step to create a new simple index.html file with the following structure inside:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Progress Bar Example</title>

    <style>

    </style>
</head>
<body>
    
    <script>
        
    </script>
</body>
</html>

Step 2: Add The HTML Structure Inside The Body Tag

You Might Like This:

Step 3: Add The CSS Code

So with the two div elements available in our HTML code we can start to add the need CSS code within the style element as you can see in the following code listing:

<style>
       .progress-bar {
          height: 24px;
          width:  360px;
          border-radius: 10px;
          background-color: lightblue;
          margin: 50px;
       }

       .progress-bar > div {
           width: 0%;
           height: 100%;
           border-radius: 10px;
           background-image: linear-gradient(to right, lightskyblue, blue);
           background-size: 360px 100%;
           transition: width 200ms;
       }
   </style>

The progress-bar class contains the CSS code which is needed to style the progress bar itself in an unfilled state.

The inner div element is used to fill the bar. The width property is used to define to which extend the bar should be filled, by default we’re setting it to 0%, so that the bar is displayed unfilled. In the following we’ll register an interval function by using a few lines of JavaScript code which is increasing this property by 10% every second.

The progress bar should be filled with a gradient, so we’re making use of background-image and background-size.

HTML + CSS Output ( Nothing 😂😅 )

Step 4: Add Some JS Code To Animate For Demonstration

Finally let’s a little bit of JavaScript code inside the <script> tag, so that we’re able to demonstrate how the progress bar filling state changes:

<script>
       setInterval(myTimer, 1000);

       function myTimer() {
           console.log("Interval event")
           const pb = document.querySelector('.progress-bar > div');
           let progress = parseInt(pb.style.width,10);
           console.log("Widht Before: " + progress);
           if (progress < 100) {
               progress = progress + 10;
           } else {
               progress = 0;
           }
           console.log("Widht After: " + progress);
           pb.style.width = progress + '%';
       }
   </script>

Here we’re implementing a function myTimer which is registered by using the setInterval function to run every 1000 milliseconds (= every second). The purpose of this function is to increase the bar by 10% by changing the width styling property of the inner div element accordingly.

That’s it, now you can open index.html in your browser and you should be able to see the final progress bar result as output.

Final Output

Source code

If you enjoyed reading this post and have found it useful for you, then please give a share with your friends, and follow me to get updates on my upcoming posts. You can connect with me on Instagram.

if you have any confusion Comment below or you can contact us by filling out our contact us form from the home section.

written by – Ninja_webTech

How To Create A Progress Bar With CSS Just In 2 Minutes

Html + CSS + JavaScript code

HTML + CSS Output ( Nothing 😂😅 )

Final Output

Source code

Leave a Comment Cancel reply