Foundation - Media Progress Bar


Progress bar is used to display your progress and can be added to your layouts. You require only two elements of HTML and they are simple and easy to customize.

The following table shows how the progress bar can be used in Foundation.

Sr.No. Progress bar detail & Description
1 Basics

Progress bar contains two elements such as container and a meter.

2 Colors

Styling the progress bar can be done by using the color classes such as .success, .warning and .alert.

3 With Text

Progress bar can be used with text by using progress-meter-text class.

4 SASS Reference

You can change the styles of the components by using SASS Reference.