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">
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.