Feedback

Spinners

Use the various .quanta-spinner components to indicate loading states. Multiple visual styles and color variants are provided.

Spinner Types

Several built‑in styles:

<div class="quanta-spinner"></div>
<div class="quanta-spinner-dual-ring"></div>
<div class="quanta-spinner-dots">
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
</div>
<div class="quanta-spinner-pulse"></div>
<div class="quanta-spinner-bar">
  <span class="quanta-bar"></span>
</div>
        

Sizes

Add .sm, .md or .lg modifier to control dimensions:

<div class="quanta-spinner sm"></div>
<div class="quanta-spinner md"></div>
<div class="quanta-spinner lg"></div>
        

Semantic Color Variants

Append a semantic class for thematic coloring:

<div class="quanta-spinner success"></div>
<div class="quanta-spinner-dual-ring danger"></div>
<!-- and so on: warning, info, accent, neutral, secondary -->
        

Responsive Sizing

Spinners adjust at different breakpoints automatically.