Progress indicators include linear progress indicators and circular progress indicators.
Call method
The linear progress indicator is written in pure CSS, and the HTML code can take effect.
The circular progress indicator is automatically initialized after the page is loaded. For dynamically generated circular progress indicators, you need to call mdui.mutation() Initialize.
color
The linear progress indicator uses the main color.
The circular progress indicator uses the main color or color.
Linear progress indicator
Uncertain progress
The progress bar is used when the accurate progress value cannot be known.
Example
<div class="mdui-progress">
<div class="mdui-progress-indeterminate"></div>
</div>
Determine the progress
The progress bar is used when the accurate progress value can be known.
modify <div class="mdui-progress-determinate"></div> CSS style of the element width To update the progress.
Example
<div class="mdui-progress">
<div class="mdui-progress-determinate" style="width: 30%;"></div>
</div>
Circular progress indicator
Just add elements <div class="mdui-spinner"></div> A circular progress bar can be generated. Add class .mdui-spinner-colorful Can generate colored circular progress bar.
Can be modified .mdui-spinner Category width with height Style value to modify the size of the circular progress bar, but it needs to be guaranteed width with height The values are equal.
Example
<div class="mdui-spinner"></div>
Example
<div class="mdui-spinner mdui-spinner-colorful"></div>
Dynamically generated circular progress indicator
If your circular progress bar component is dynamically generated, you need to call mdui.mutation() Initialize.
If you need to modify the existing circular progress bar component, you need to call mdui.updateSpinners() Method to reinitialize the component. This method can accept a .mdui-spinner The CSS selector of the class, or DOM elements, or an array of DOM elements as parameters, indicates that only the specified circular progress bar is reinitialized. If no parameters are passed in, all circular progress bars on the page will be reinitialized.
List of CSS class names
| Class name |
effect |
.mdui-progress |
Define a linear progress indicator. |
.mdui-progress-indeterminate |
Linear progress indicator for uncertain progress. |
.mdui-progress-determinate |
A linear progress indicator that determines progress. |
.mdui-spinner |
Define a circular progress indicator. |
.mdui-spinner-colorful |
Colored circular progress indicator. |