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>