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.
All examples showcased refer to the mini-default flavor, some class names and styles might differ based on the flavor you're using.
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 use the progress module, simply include the link to the flavor you are using and start writing your HTML page as usual. One suggestion we will make is to add the following line inside your HTML page's <head> to utilize the viewport meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1">
Basic progress bar
Process is 0% complete!
Process is 45% complete!
Process is 100% complete!
To create a progress bar, use the <progress> HTML element, specify the preset maximum of max="1000" and set a value between 0 and 1000. Update your <progress> element using some Javascript code, by changing its value to any integer in the same range.
Sample code
<progress value="0" max="1000"></progress> <progress value="450" max="1000"></progress> <progress value="1000" max="1000"></progress>
Notes
- We made sure that the
<progress>element displays properly on all modern browsers, using browser-specific rules. However, there might be some irregularities with older browsers, especially legacy versions of Internet Explorer. - If the preset
max="1000"does not suit your needs, you should check the customization page for instructions on how to set your own maximum value for the<progress>element.
<progress value="80" max="100"></progress>
Don't: Avoid using different values for the <progress> element's max, except for the preset one (1000).
<progress value="450.5" max="1000.0"></progress>
Don't: Try not to use floating point values for either the <progress> element's value or max. During testing of the module, we found that floating point values could cause unexpected behavior.
Progress bar variants
Secondary process is 60% complete!
Tertiary process is 30% complete!
Nano progress bar is 75% filled!
Inline progress bar:
Apart from the default style for the <progress> element, we have also included a couple of variants for it. First off, you can change the color of your progress bars, based on the context, using the .secondary or .tertiary class. You can also make a <progress> element tiny, using the .nano class. Finally, you can create inline progress bars, using the .inline class.
Sample code
<progress class="secondary" value="600" max="1000"></progress> <progress class="tertiary" value="300" max="1000"></progress> <progress class="nano" value="750" max="1000"></progress> <progress class="inline" value="150" max="1000"></progress>
Notes
- If you want to add your own custom size classes for
<progress>elements, check the customization page for instructions.
<progress class="nano secondary" value="800" max="1000"></progress>
<!-- or -->
<progress class="inline tertiary" value="650" max="1000"></progress>
Do: You can mix size and color classes for <progress> elements as needed.
<progress class="secondary teriary" value="450" max="1000"></progress>
<!-- or -->
<progress class="inline nano" value="300" max="1000"></progress>
Don't: Avoid mixing two classes of the same type (i.e. two color classes or two size classes).
Donut spinner
Donut spinners can be used to indicate that something is loading or that a process is running in the background. To create a donut spinner, add the .spinner-donut class to an element of your liking. We would recommend using a <div> element for most cases, but <span> elements should work pretty well, too.
Sample code
<div class="spinner-donut"></div>
Notes
- The
.spinner-donutis an animated component, meaning that if a browsers does not support animation, this element might display incorrectly. - In certain cases, it might be useful to add the
role="progressbar"attribute to increase donut spinner accessibility.
<p>Loading... <span class="spinner-donut"></span></p>
Do: You can place a .spinner-donut inside a paragraph or some other textual context and it will display inline.
<div class="spinner-donut">Loading...</div>
Don't: Avoid inserting text inside the .spinner-donut, as this might cause unexpected bahavior and will probably make the text spin along with it.
Donut spinner variants
Apart from the default donut spinner style, there are also two more contextual color classes: .secondary and .tertiary. If your donut spinners are too small, you can also use the .large class to make it pop out a little bit more.
Sample code
<div class="spinner-donut secondary"></div> <div class="spinner-donut tertiary"></div> <div class="spinner-donut large"></div>
Notes
- You can mix one of the contextual color classes and the
.largeclass, if you want, similarly to what you can do with progress bars.
If you want to learn more about mini.css's modules, go back to the modules page and choose another module to see its documentation.