HTML - tags - progress tag

revision:

Content

"progress" tag : represents progression of a task, displayed in task bar syntax some examples

"progress" tag : represents progression of a task, displayed in task bar

top

The <progress> tag represents the completion progress of a task, typically displayed as a progress bar. Always add the <label> tag for best accessibility practices.

The <progress> tag is used in conjunction with JavaScript to display the progress of a task. Dynamically changing values of the progress bar must be defined with the scripts (JavaScript). The <progress> tag is not suitable for representing a gauge (e.g. disk space usage or relevance of a query result). To represent a gauge, use the <meter> tag instead.

A <progress> tag cannot be nested inside another <progress> tag.

Attributes: the <progress> element includes the global attributes. The tag also supports the following additional attributes:

max ; value: number;

specifies how much work the task requires in total. The "max" attribute, if present, must have a value greater than 0 and be a valid floating point number. The default value is 1.

value ; value: number;

specifies how much of the task has been completed. It must be a valid floating point number between 0 and max, or between 0 and 1 if max is omitted. If there is no "value"S attribute, the progress bar is indeterminate; this indicates that an activity is ongoing with no indication of how long it is expected to take.

Unlike the <meter> element, the "minimum value" is always 0, and the "min attribute" is not allowed for the <progress> element.

syntax

<progress value=" " max=" "> . . . . </progress>

some examples

top
32% 
code:
                <div class="spec">
                    <label class="example" for="file">Downloading progress:</label>
                    <progress id="file" value="32" max="100"> 32% </progress>
                </div>
            
code:
                <progress class="example"></progress>  
            


code:
                <script>
                    var gvalue=1;
                    function abc(){
                    var progressExample = document.getElementById ('progress-javascript-example');
                        setInterval (function ()
                        { 
                            if(gvalue<100){
                                gvalue++;
                                progressExample.value =gvalue;  
                            }
                            abc();            
                        }, 1000);
                    }
                </script>
                <progress class="example" id="progress-javascript-example" min="1" max="100"></progress>  
                <br/><br/>
                <button class="example" onclick="abc()">click me</button>

Determininate progress bar: 25%

Indetermininate progress bar: 25% 

code:
                <div class="spec">
                    <p class="example">Determininate progress bar:
                        <progress value="750" max="1000">
                            <span id="downloadProgress">25</span>%
                        </progress>
                    </p>
                    <p class="example">Indetermininate progress bar:
                        <progress max="1000">
                            <span id="downloadProgress">25</span>%
                        </progress>
                    </p>
                </div>