Progress bars
Progress bars are useful to convey to the user that some action is being performed.
Progress status
Pass the % status of the task being performed as width, as the task progress the progress bar will keep filling.
<div class="progress-bar">
<div class="progress-bar__status" style="width: 80%"></div>
</div>Infinite Progress bar
You can also display a progress bar which keeps running infinitely. Once the task is completed you can simply remove or delete the component markup.
<div class="progress-bar progress-bar--infinite">
<div class="progress-bar__status"></div>
</div>Pulse dot
The pulse dot keeps running and you can display it when you are doing some task. By default its shown in the sites primary theme colour, you can also have pulse dots for your sites secondary and tertiary theme colour.
<div class="pulse-dot"></div>There are three sizes to choose from the default(small), medium, large.
<div class="pulse-dot pulse-dot--medium"></div>
<div class="pulse-dot pulse-dot--large"></div>You can also change the size, colour to something of your liking.
<div
class="pulse-dot"
style="width: 4rem; height: 4rem; background: aliceblue"
></div>
Loader
You can also use circular loader, the default size is small, and the colour is the primary colour. Both of which are customizable.
<div class="loader"></div>
<div class="loader loader--secondary"></div>
<div class="loader loader--tertiary"></div>Medium sized loaders
<div class="loader loader--medium"></div>
<div class="loader loader--secondary loader--medium"></div>
<div class="loader loader--tertiary loader--medium"></div>Large sized loaders
<div class="loader loader--large"></div>
<div class="loader loader--secondary loader--large"></div>
<div class="loader loader--tertiary loader--large"></div>Customizing size and color
<div
class="loader"
style="
width: 2rem;
height: 2rem;
border-top-color: lightblue;
border-left-color: lightblue;
border-right-color: lightblue;
"
}}
></div>