The Progress control is a css only control you can use to indicate that an element is processing or loading.
In general, use an sme control such as sme-loading-wheel before using these classes directly.
Determinate progress should be used when you know when progress of a process is measurable.
This version of progress uses the progress element for maximum accessibility. Here is an example of how to add this element in code:
<progress class="sme-progress" role="progressbar" max="100" value="80" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" tabindex="0" aria-label="determinate progress bar"></progress>
Indeterminate regional progress should be used when a large region of the page is processing and you do not know when it will complete.
This version of progress cannot use the progress element so be sure to use role="progressbar" for the best accessability. Here is an example of how to add this element in code:
<div class="sme-progress sme-progress-indeterminate-regional" role="progressbar" aria-valuetext="Loading..." tabindex="0" aria-label="indeterminate regional progress bar">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
Indeterminate local progress should be used when a small region of the page is processing and you do not know when it will complete.
This version of progress cannot use the progress element so be sure to use role="progressbar" for the best accessability. Here is an example of how to add this element in code:
<div class="sme-progress sme-progress-indeterminate-local" role="progressbar" aria-valuetext="Loading..." tabindex="0" aria-label="indeterminate local small progress bar">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
The size of the progress dots in an indeterminate local progress can be controlled with the following class structure:
.sme-progress-[size]
The default value for '[size]' is 'medium' but 'small' and 'large' are also available.