<progress> - HTML CSS HTML Tag

HTML CSS examples for HTML Tag:progress

  1. HOME
  2. HTML CSS
  3. HTML Tag
  4. progress

Introduction

The progress element indicates the gradual completion of a task.

The progress Element summary

Item value
Element:progress
Element Type: Phrasing
Local Attributes: value, max, form
Tag Style: Start and end tags
New in HTML5? Yes
Changes in HTML5 N/A
Style ConventionNone

The value attribute defines the current progress, which is on a scale between zero and the value of the max attribute.

When the max attribute is omitted, the scale is between zero and 1.

You express progress using floating-point numbers, such as 0.3 for 30%.

Tag-Specific Attributes

The following table shows the attributes that are specific to the <progress> tag.

Attribute Value Description
max number sets how much work the task requires in total.
value number sets 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 the max attribute is not present.

The following code shows the progress element and some buttons. Pressing a button updates the value displayed by the progress element.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
   <head> 
      <title>Example</title> 
   </head> 
   <body> 
      <progress id="myprogress" value="10" max="100"></progress> 
      <p> 
         <button type="button" value="30">30%</button> 
         <button type="button" value="60">60%</button> 
         <button type="button" value="90">90%</button> 
      </p> 
      <script>
var buttons = document.getElementsByTagName('BUTTON');
var progress = document.getElementById('myprogress');
for (var i = 0; i < buttons.length; i++) {
   buttons[i].onclick = function(e) {
      progress.value = e.target.value;<!-- www.ja v  a 2  s .c o m-->
   };
}

      </script>  
   </body>
</html>

Related Tutorials