sunweb

Progress Bar

component progress-bar progress bar

Definition


The progress bar shows the state of a process and can also be used to display the amount of "something" according to a total amount. It's mostly used in the reviews section.

c-progress-bar

Handlebars

Default progress bar
25%
Loading...

Javascript

Loading...

c-progress-bar without title
25%

c-progress-bar with hidden value
Hide value

c-progress-bar with custom suffixes
Custom suffixes
25%

Variants


c-progress-bar > c-progress-bar--small

The small variant reduces the title and value texts. It's useful when you have various progress bars together in a compact layout.

Small progress bar
25%