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.