Foundation CSS Progress Bar

The Progress Bar component in Foundation CSS allows you to visually represent the progress of a task or process. Progress bars are commonly used in web applications to indicate the completion status of an operation or to provide feedback to users. Foundation CSS provides easy-to-use classes for creating progress bars with different styles and configurations.

1. Basic Progress Bar

To create a basic progress bar, you can use the progress element with the meter element nested inside it. Set the value attribute of the meter element to specify the progress value.

Example markup:

<progress class="progress" value="50" max="100"><meter>50%</meter></progress>

This will create a basic progress bar with 50% completion.

2. Styled Progress Bar

Foundation CSS provides classes for styling progress bars with different colors and sizes. You can use classes like success, warning, alert for color variations, and tiny, small, medium, large for size variations.

Example markup for a styled progress bar:

<progress class="success progress small" value="75" max="100"><meter>75%</meter></progress>

This will create a small progress bar with a success color indicating 75% completion.

3. Striped Progress Bar

You can add stripes to progress bars to create a striped effect using the striped class.

Example markup for a striped progress bar:

<progress class="warning progress striped" value="40" max="100"><meter>40%</meter></progress>

This will create a striped progress bar with a warning color indicating 40% completion.

4. Animated Progress Bar

Foundation CSS also provides classes for creating animated progress bars using the animated class.

Example markup for an animated progress bar:

<progress class="animated progress" value="60" max="100"><meter>60%</meter></progress>

This will create an animated progress bar indicating 60% completion.

Conclusion

The Progress Bar component in Foundation CSS offers a flexible and customizable solution for displaying progress indicators in web applications. Whether you need a basic progress bar or want to add styling, striping, or animation effects, Foundation CSS provides the necessary classes to create visually appealing and informative progress bars that enhance the user experience.

Archive