Foundation - Progress Bar SASS Reference

Description

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

Variables

The following table lists the SASS variables in project's settings file that makes this component's default styles to get customized.

Sr.No.	Name & Description	Type	Default Value
1	$progress-height It represents the progress bar's height.	Number	1rem
2	$progress-background It represents the progress bar's background color.	Color	$medium-gray
3	$progress-margin-bottom It represents the progress bar's bottom margin.	Number	$global-margin
4	$progress-meter-background It represents the default color of the meter of the progress bar.	Color	$primary-color
5	$progress-radius It represents the default progress bar's radius.	Number	$global-radius

Mixins

To build this component's final CSS output, the following mixins can be used. To build your own class structure using Foundation components, you can use the mixins yourself.

progress-container

@include progress-container;

It adds styles to the container of the progress bar.

progress-meter

@include progress-meter;

It adds styles to the progress bar's inner meter.

progress-meter-text

@include progress-meter-text;

It adds styles to the text in meter of the progress bar.

foundation_media.htm