W3.CSSLesson 47Free preview

W3.CSS Progress Bars

This lesson is part of W3.CSS · All levels

Summary

The progress bar shows completion of a task such as uploading or scoring. The pattern is simple: a container is lightly laid, and the colored content bar is set to a style width. With the percentage written in the bar, the user immediately knows the status of the process. (W3.CSS)

Key points

Container using .w3-light-grey, content bar using color class such as .w3-green
Percentage determined by style="width: 70%" on the content bar
Write a percentage text in the bar and give the average
Add the "progressbar" and the "valuenow" for accessibility
Class makes the end of the bar round (.w3-round-)

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.