Inline loader
Pending/Waiting
Provide contextual message
<div class="box u-flex u-cross-center u-gap-16" style="--p-box-padding:1rem 1.5rem;">
<span class="icon-clock u-color-text-offline" aria-hidden="true"></span>
<span class="u-trim u-stretch">Provide contextual message</span>
<button class="button is-secondary"><span class="text">Button</span></button>
</div>
Loading
Provide contextual message
<div class="box u-flex u-cross-center u-gap-16" style="--p-box-padding:1rem 1.5rem;">
<div class="loader" style="--loader-size:1rem; --loader-border-size:0.09375rem"></div>
<span class="u-trim u-stretch">Provide contextual message</span>
<button class="button is-secondary"><span class="text">Button</span></button>
</div>
Failed
Provide contextual message
<div class="box u-flex u-cross-center u-gap-16" style="--p-box-padding:1rem 1.5rem;">
<span class="icon-exclamation-circle u-color-text-danger" aria-hidden="true"></span>
<span class="u-trim u-stretch">Provide contextual message</span>
<button class="button is-secondary"><span class="text">Button</span></button>
</div>
Success
Provide contextual message
<div class="box u-flex u-cross-center u-gap-16" style="--p-box-padding:1rem 1.5rem;">
<span class="icon-check-circle u-color-text-success" aria-hidden="true"></span>
<span class="u-trim u-stretch">Provide contextual message</span>
<button class="button is-secondary"><span class="text">Button</span></button>
</div>
Multiple Loader Boxes
Provide contextual message
Provide contextual message
Provide contextual message
<div class="boxes-wrapper">
<div class="box u-flex u-cross-center u-gap-16" style="--p-box-padding:1rem 1.5rem;">
<span class="icon-clock u-color-text-offline" aria-hidden="true"></span>
<span class="u-trim u-stretch">Provide contextual message</span>
<button class="button is-secondary"><span class="text">Button</span></button>
</div>
<div class="box u-flex u-cross-center u-gap-16" style="--p-box-padding:1rem 1.5rem;">
<div class="loader" style="--loader-size:1rem; --loader-border-size:0.09375rem"></div>
<span class="u-trim u-stretch">Provide contextual message</span>
<button class="button is-secondary"><span class="text">Button</span></button>
</div>
<div class="box u-flex u-cross-center u-gap-16" style="--p-box-padding:1rem 1.5rem;">
<span class="icon-check-circle u-color-text-success" aria-hidden="true"></span>
<span class="u-trim u-stretch">Provide contextual message</span>
<button class="button is-secondary"><span class="text">Button</span></button>
</div>
</div>