• Menu
  • Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

JavaBeat

Java Tutorial Blog

  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)
  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)

HTML5 Progress Tag

March 15, 2014 //  by Krishna Srinivasan//  Leave a Comment

Implementing the progress bar for knowing the current status of task is common among the applications. Prior to HTML5, there is no default element in HTML to achieve this functionality. Programmers has to implement their own design or to get the help of third party implementation. With the HTML5, the <progress> tag is used to show the progress of the work. It shows the progress bar and tells the how much progress has been finished.

Syntax of <progress> Tag

<progress>....</progress>

Supported Browser

<progress> tag in HTML5 is supported in Firefox, Opera, Chrome, Internet Explorer 10 and Safari 6.

Attributes of <progress> Tag

  • max: This attribute specifies how much task need to done before it complete. If it is not specified, the default value of this attribute is between 0.0. to 1.0.
  • value: This attribute specifies the current completed task or current status of the progress bar.

States of <progress> Bar

A progress bar state can be categorized in two states as below:

  • Indeterminate: This type of progress bar is used if the actual status cannot be calculated, hence can be used to provide user feedback.
  • Determinate: A determinate progress bar should only be used in situations where the system can accurately update the current status. A determinate progress bar should never fill from left to right, then loop back to empty for a single process.

In the following examples we have used the determinate progress bars

Example of <progress> Tag

<!DOCTYPE html>
<body>
   <h4>Default Indeterminate Progress Bar</h4>
   <progress></progress><br></br>
   <h4>Progress Bar - 0%</h4>
   <progress max="10" value="0"></progress><br></br>
   <h4>Progress Bar -100%</h4>
   <progress max="3254" value="3254"></progress><br></br>
   <h4>Progress Bar - 57%</h4>
   <progress max="0.7" value="0.4"></progress><br></br>
</body>
</html>

Here we can see various examples of using progress bars. You can further change the look and feel of the progress bar by adding styles, animations.

Example Application Test

  • Save the file as progress_example.html in your system.
  • Just open the file in the browser, you will see the below picture in the browser. Note that the browser must support HTML5 specification.

Output

When the execution process is completed successfully we will get the following output :
HTML5 Progress Tag

Category: HTMLTag: HTML5

About Krishna Srinivasan

He is Founder and Chief Editor of JavaBeat. He has more than 8+ years of experience on developing Web applications. He writes about Spring, DOJO, JSF, Hibernate and many other emerging technologies in this blog.

Previous Post: « HTML5 Output Tag
Next Post: HTML5 Time Tag »

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Follow Us

  • Facebook
  • Pinterest

FEATURED TUTORIALS

New Features in Spring Boot 1.4

Difference Between @RequestParam and @PathVariable in Spring MVC

What is new in Java 6.0 Collections API?

The Java 6.0 Compiler API

Introductiion to Jakarta Struts

What’s new in Struts 2.0? – Struts 2.0 Framework

JavaBeat

Copyright © by JavaBeat · All rights reserved
Privacy Policy | Contact