DEV Community

Aisha Rajput
Aisha Rajput

Posted on

8 1

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" />

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay