HTML5: Progress bar

This entry is part 27 of 34 in the series HTML5

Without using jQueryUI, we try to create a progress bar using native HTML5.

The progress element has two optional attributes:

  •  value: The value attribute represents how much of the task (in percent) has been completed.
  •  max: The max attribute represents the total amount required to complete the task.
<progress value='45' max='100'><span>45</span>% complete</progress>

This option is not yet supported in Safari and we could see from the screenshots below that it will fall back gracefully.

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>Codecrawl.com: Progress Bar</title>
</head>
<body>
<p>Downloading is in progress, please wait.</p>
<progress value='45' max='100'><span>45</span>% complete</progress>
</body>
</html>

Progress bar is not supported in Safari yet and here is how Safari will handle the code.

safari_progressbar

 

Series Navigation<< HTML5: Creating autocomplete using <datalist>
HTML5: Meter >>