Tutorial by Examples

The <progress> element is new in HTML5 and is used to represent the progress of a task <progress value="22" max="100"></progress> This creates a bar filled 22%

Progress bars can be styled with the progress[value] selector. This example gives a progress bar a width of 250px and a height of 20px progress[value] { width: 250px; height: 20px; } Progress bars can be especially difficult to style. Chrome / Safari / Opera These browsers use the -web...

For browsers that do not support the progress element, you can use this as a workaround. <progress max="100" value="20"> <div class="progress-bar"> <span style="width: 20%;">Progress: 20%</span> </div> </pr...