Progress
The progress module gives you full control over the presentation of progress and loading on your pages. Apart from progress bars and color variants for them, spinner elements are provided to help communicate that something is loading.
Quick overview
Progress indicators are very common UI elements for almost any website and web app, as they help communicate vital information such as the fact that a process is being executed in the background, informing the user that they should wait for it to complete before proceeding. The progress module provides you with two essential tools to communicate this information: the <progress> HTML element, which is pre-styled and compatible with modern browsers to help you communicate information about the percentage of a task and the .spinner-donut class that allows you to create an animated spinner that communicates that something is loading currently and will continue doing so for an indefinite amount of time. Both elements come with their own color and size variants and are fully accessible.
Quick start
To customize the progress module, duplicate an existing flavor file (we suggest you use the mini-default.scss flavor file) and use this page's variable tables and mixins as a reference to change only the values you need. Remember to compile your flavor file (not the module's partial file) using a Sass preprocessor (we highly recommend using sass-autocompile if you are working with Atom).
Progress bar
The progress module's styling of <progress> elements is highly customizable.
| Variable | Type | Description | Sample value |
|---|---|---|---|
| $progress-back-color | Color | Background color for <progress> elements | #eeeeee |
| $progress-fore-color | Color | Progress bar color for <progress> elements | #01579b |
| $progress-height | Height | Height for <progress> elements | 14px |
| $progress-max-value | integer | Arithmetic max value for <progress> elements | 1000 |
| $progress-border-style | Border | Border style for <progress> elements | 1px solid #bdbdbd |
| $progress-border-radius | Border radius | Border radius for <progress> elements | 1px |
| $progress-top-bottom-margin | Margin (single value) | Top and bottom margin for <progress> elements | 2px |
| $progress-left-right-margin | Margin (single value) | Left and right margin for <progress> elements | 8px |
| $progress-box-shadow | Box shadow | Box shadow for <progress> elements | 0 1px 3px rgba(0,0,0, 0.1) |
Donut spinner
The progress module's donut spinner uses a custom class and a few variables for custmization.
| Variable | Type | Description | Sample value |
|---|---|---|---|
| $spinner-donut-name | String | Class name for donut spinner components | 'spinner-donut' |
| $spinner-donut-back-color | Color | Background color for donut spinner components | #e3f2fd |
| $spinner-donut-fore-color | Color | Foreground color for donut spinner components | #1565c0 |
| $spinner-donut-border-thickness | Border width | Border width for donut spinner components | 4px |
| $spinner-donut-size | Size (single value, px preferred) |
The size of donut spinner components (determines multiple values of the element) | 20px |
Progress bar mixins
The progress module contains a couple of mixins for adding custom styles to <progress> elements (color and style variants), as well as a mixin for creating inline progress bars.
| Mixin | Description |
|---|---|
| make-progress-alt-color ($progress-alt-name, $progress-alt-fore-color, $progress-alt-back-color) | Creates a new <progress> color variant using the specified values. |
| make-progress-alt-style ($progress-alt-name, $progress-alt-height,$progress-alt-top-bottom-margin,$progress-alt-left-right-margin, $progress-alt-border-style, $progress-alt-border-radius, $progress-alt-box-shadow) | Creates a new <progress> style variant using the specified values. |
| make-progress-inline ($progress-inline-name, $progress-inline-width) | Creates a new <progress> style variant using the specified values. |
| Parameter | Type | Description | Sample value |
|---|---|---|---|
| $progress-alt-name | String | Class name for the <progress> color variant | 'secondary' |
| $progress-alt-fore-color | Color | Foreground color for the <progress> color variant | #e53935 |
| $progress-alt-back-color | Color | (Optional) Background color for the <progress> color variant | #eeeeee |
Sample usage
@include make-progress-alt-color ('secondary', #e53935, #eeeeee);
| Parameter | Type | Description | Sample value |
|---|---|---|---|
| $progress-alt-name | String | Class name for the <progress> style variant | 'nano' |
| $progress-alt-height | Height | Height for the <progress> style variant | 2px |
| $progress-alt-top-bottom-margin | Margin (single value) | (Optional) Top and bottom margin for the <progress> style variant | 1px |
| $progress-alt-left-right-margin | Margin (single value) | (Optional) Left and right margin for the <progress> elements | 1px |
| $progress-alt-border-style | Border | (Optional) Border style for the <progress> style variant | 1px solid #bdbdbd |
| $progress-alt-border-radius | Border radius | (Optional) Border radius for the <progress> style variant | 1px |
| $progress-alt-box-shadow | Box shadow | (Optional) Box shadow for the <progress> style variant | 0 1px 3px rgba(0,0,0, 0.1) |
Sample usage
@include make-progress-alt-style ('nano', 2px, 1px, 1px, 1px solid #bdbdbd, 1px, 0 1px 3px rgba(0,0,0, 0.1));
| Parameter | Type | Description | Sample value |
|---|---|---|---|
| $progress-inline-name | String | Class name for the <progress> inline variant | 'inline' |
| $progress-inline-width | Width (percentage preferred) | Width of the <progress> inline variant | 60% |
Sample usage
@include make-progress-inline ('inline', 60%);
Donut spinner mixins
The progress module contains a couple of mixins for adding custom styles to donut spinners (color and style variants).
| Mixin | Description |
|---|---|
| make-spinner-donut-alt-color ($spinner-donut-alt-name, $spinner-donut-alt-back-color, $spinner-donut-alt-fore-color) | Creates a new donut spinner color variant using the specified values. |
| make-spinner-donut-alt-style ($spinner-donut-alt-name, $spinner-donut-alt-size, $spinner-donut-alt-border-thickness) | Creates a new donut spinner style variant using the specified values. |
| Parameter | Type | Description | Sample value |
|---|---|---|---|
| $spinner-donut-alt-name | String | Class name for the donut spinner color variant | 'secondary' |
| $spinner-donut-alt-back-color | Color | Background color for the donut spinner color variant | #ffebee |
| $spinner-donut-alt-fore-color | Color | (Optional) Text color for the donut spinner color variant | #c62828 |
Sample usage
@include make-spinner-donut-alt-color ('secondary', #ffebee, #c62828);
| Parameter | Type | Description | Sample value |
|---|---|---|---|
| $spinner-donut-alt-name | String | Class name for the donut spinner style variant | 'large' |
| $spinner-donut-alt-size | Size (single value, px preferred) |
Size of the donut spinner style variant (determines multiple values of the element) | 32px |
| $spinner-donut-alt-border-thickness | Border width | (Optional) Border thickness for the donut spinner style variant | 6px |
Sample usage
@include make-alert-alt-style ('large', 32px, 6px);
If you want to learn more about customizing mini.css, go back to the customization page or choose a module from the top menu to see its documentation.