W3.CSSLesson 32Free preview

W3.CSS Bars

This lesson is part of W3.CSS · All levels

Summary

The bar is used for two things: displaying progress such as file downloads, and organizing a row of items in a row using the w3-bar. A simple progress bar is made of a flat container that has a child spread out a percentage. The contrasting color combination makes the progression numbers instantly readable.

Key points

Progress bar = background container with child spread percentage
W3-bar becomes a horizontal container for some items
W3-bar-item is a button or link inside a bar
The width of the child is calculated relative to the container so the percentage is accurate
Good progress is equipped with a text of numbers to make it clear to all users

Full lesson

Code examples and quizzes

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