Skip to content
Related Articles
Get the best out of our app
GeeksforGeeks App
Open App

Related Articles

How to set/get the value of Progress Bar using JavaScript ?

Improve Article
Save Article
Like Article
Improve Article
Save Article
Like Article

In this article, we are creating the progress bar of a task by using a <progress> tag. The <progress> tag is used to represent the progress of a task. It is also defined how much work is done and how much is left to download a thing. It is not used to represent the disk space or relevant query.

The progress object in HTML DOM is used to represent the HTML <progress> element. The <progress> element can be accessed by using getElementById() method.

Property Values:

  • level: It returns the list of progress bar.
  • max: It is used to set or return the progress bar value of max attribute.
  • value: It represent the amount of work are already completed.
  • position: It returns the current position of progress bar.



<!DOCTYPE html>
        How to set and get the value of
        Progress Bar using JavaScript ?
<body style="text-align: center;">
    <h1 style="color:green;">
        Set and Get the value of Progress
        Bar using JavaScript
    <P id="GFG">
        Downloading progress for a song:
    <button onclick="myGeeks()">
        function myGeeks() {
            // Create a progress element
            var g = document.createElement("progress");
            // Set the value of progress element
            g.setAttribute("value", "57");
            // Set the maximum value of progress element
            g.setAttribute("max", "100");
            // Get the value of progress element


Before Button Click:

After Button Click:

Supported Browsers:

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Opera
  • Safari

My Personal Notes arrow_drop_up
Last Updated : 22 Dec, 2020
Like Article
Save Article
Similar Reads
Related Tutorials