Dynamic Progress Bar in HTML

#html #javascript #beginners

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>

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;
   }

We get this
.

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)

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>

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.