Dynamic Progress Bar in HTML

Table of Contents What is the progress bar?How to create a progress bar in HTML? How to make the HTML progress bar dynamic? What is the progress bar? Progress shows the visual status of loading, downloading, …

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 of how much percent your task has been completed, and some show 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 progress bar: percentage progress bar, multistep progress bar, circular and more. Here, we will 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 Progress Bar 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>
*, *::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 progress bar as an output as the result of using HTML and CSS. 

Dynamic Progress Bar in HTML

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)
</script>

It 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. 

Suggested Read: Reactstrap vs. React-Bootstrap

Leave a Comment