Progress Bar
Progress bars include linear progress bars and circular progress bars.
Usage
The linear progress bar is implemented in pure CSS, so writing the HTML is enough for it to take effect.
The circular progress bar is automatically initialized after the page is loaded. For dynamically generated circular progress bars, you need to call mdui.mutation() for initialization.
Color
The linear progress bar uses the primary color.
The circular progress bar uses either the primary color or multiple colors.
Related Reading
Material Design Guidelines: Components - Progress & activity
Linear progress bar
Indeterminate progress
This progress bar is used when the exact progress value is unknown.
<div class="mdui-progress">
<div class="mdui-progress-indeterminate"></div>
</div>Determinate progress
This progress bar is used when the exact progress value is known.
Update the width property value of the <div class="mdui-progress-determinate"></div> element to update the progress.
<div class="mdui-progress">
<div class="mdui-progress-determinate" style="width: 30%;"></div>
</div>Circular progress bar
Simply add the element <div class="mdui-spinner"></div> to generate a circular progress bar. Add the class .mdui-spinner-colorful to generate a colorful circular progress bar.
The size of the circular progress bar can be modified by changing the width and height style values of the .mdui-spinner class, ensuring that the width and height values are equal.
Dynamically generated circular progress bar
If your circular progress bar component is dynamically generated, you need to call mdui.mutation() for initialization.
If you need to modify an existing circular progress bar component, you need to call the mdui.updateSpinners() method to reinitialize the component. This method can accept a CSS selector (which should include the class name .mdui-spinner), a DOM element, or an array of DOM elements as a parameter, indicating that only the specified circular progress bars will be reinitialized. If no parameter is passed, all circular progress bars on the page will be reinitialized.