DEV Community 👩‍💻👨‍💻

Aisha Rajput
Aisha Rajput

Posted on

Dynamic Progress Bar in HTML

What is the progress bar?

Progress shows the visual status of loading, downloading, progress. Some progress bar shows the percentage that how much percent your task has been completed and some of them shows how much your task will take the time to finish. It simply shows the progress status of a task. It is a Graphical representation of task status.
There are different types of a progress bar: percentage progress bar, multistep progress bar, circular and more. Here, we are going to create a simple downloading progress bar in HTML, JavaScript, and CSS.

How to create a progress bar in HTML?

We are creating a progress bar by using HTML and CSS and making it dynamic by using JavaScript.
First creating HTML file ProgressBar.html
We create a class ProgressBar inside a div tag that displays the downloading progress bar that will start with 10% width.

<!DOCTYPE html>
<html>
  <head>   
<link rel="stylesheet" href="style.css">
    <title>Dynamic Progress Bar</title>
  </head>
  <body>
    <h1>Progress Bar</h1>
    <div class="ProgressBar" style="--width: 10" Dlabel="Downloading..."></div>
      </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Create a file style.css file that will apply styling on the progress bar and connect it with HTML.

*, *::before, *::after {
    box-sizing: border-box;
}
.ProgressBar {
    position: relative;
    width: 600px;
    height: 3em;
    background-color: black;
    border-radius: 1.5em;
    color: white;
}
/*progress styling*/
.ProgressBar::before {
    content: attr(Dlabel);
    display: flex;
    align-items: center;
    position: absolute;
    left: .5em;
    top: .5em;
    bottom: .5em;
    width: calc(var(--width, 0) * 1%);
    min-width: 2rem;
    max-width: calc(100% - 1em);
    background-color: green;
    border-radius: 1em;
    padding: 1em;
}
/*backgroud styling*/
html {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
   }
Enter fullscreen mode Exit fullscreen mode

We get this
progress bar using HTML and CSS.

How to make the HTML progress bar dynamic?

we use JavaScript that helps to make the progress bar dynamic. Some JavaScript properties make ProgressBar dynamic.
• document.getElementsByClassName (): Get all the elements from the class and store in progressBar.
• setInterval(): property that executes code repeatedly in specified 5 sec to finish the progress bar.
• getComputedStyle(): It gets all the CSS active styling that is used in progressBar and performs computation on the given values(if exist) of the stylesheet.
• getPropertyValue(): It returns a string of width that contains all the specified values of width.
• style.setProperty() set values for the width property on the object that is declared in style.

<script type="text/javascript">
      const progressBar = document.getElementsByClassName('ProgressBar')[0]
setInterval(() => {
  const computedStyle = getComputedStyle(progressBar)
  const width = parseFloat(computedStyle.getPropertyValue('--width')) || 0
  progressBar.style.setProperty('--width', width + .1)
}, 5)
Enter fullscreen mode Exit fullscreen mode

This is complete HTML code, how it looks after adding JavaScript.

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css">
    <title>Dynamic Progress Bar</title>
  </head>
  <body>
    <h1>Progress Bar</h1>
    <div class="ProgressBar" style="--width: 8" Dlabel="Downloading..."></div>
    <script type="text/javascript">
      const progressBar = document.getElementsByClassName('ProgressBar')[0]
setInterval(() => {
  const computedStyle = getComputedStyle(progressBar)
  const width = parseFloat(computedStyle.getPropertyValue('--width')) || 0
  progressBar.style.setProperty('--width', width + .1)
}, 5)
</script>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Conclusion

The progress bar is a graphical representation of task status. In this article, we have created a downloading progress bar in HTML with CSS styling. To make the progress bar dynamic, we use JavaScript.

Top comments (1)

Collapse
 
pbergwerff profile image
pbergwerff

What about:

<progress max="100" value="70" />

This post blew up on DEV in 2020:

js visualized

🚀⚙️ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! 🥳

Happy coding!