Clay - Progress Bars

Progress Groups

Place an addon on either side of a progress component with progress-group and progress-group-addon.

30%

70%

Progress Group Stacked

Add progress-group-stacked to progress-group stack the addons and progress component.

60% Completed

Progress Variants

Add progress-danger, progress-info, progress-success, or progress-warning to progress-group or progress to provide visual feedback for different progress states. Color a block of text or icon by wrapping it with progress-group-feedback.

Using the variant classes will set the background-color on progress-bar, no need to use Bootstrap 4 background utility classes.

Progress

25%

50%

75%

100%

Progress Group

60%

Multiple Progress Bars

If you need multiple progress bars, use Bootstrap 4's background utilities, bg-primary, bg-success, bg-info, bg-warning, and bg-danger on progress-bar.

25%

50%

33%

45%

10%

Progress Sizes

Normal

25%

60%

Large

45%

60%

Progress with Bootstrap 4 Background Utility

60% (Success)

100% (Info)

40% (Warning)

80% (Danger)