Spinner

A loading spinner to indicate an ongoing process.

Default

Basic spinning circle indicator.

html 
<svg class="uc-animate-spin uc-h-6 uc-w-6 uc-text-accents-blue"
  xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
  <circle class="uc-opacity-25" cx="12" cy="12" r="10"
    stroke="currentColor" stroke-width="4"></circle>
  <path class="uc-opacity-75" fill="currentColor"
    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
</svg>

Sizes

Small (16px), medium (24px), large (32px), and extra-large (48px) spinners.

html
sm
md
lg
xl 
<svg class="uc-animate-spin uc-h-4 uc-w-4 uc-text-accents-blue">...</svg>  <!-- sm -->
<svg class="uc-animate-spin uc-h-6 uc-w-6 uc-text-accents-blue">...</svg>  <!-- md -->
<svg class="uc-animate-spin uc-h-8 uc-w-8 uc-text-accents-blue">...</svg>  <!-- lg -->
<svg class="uc-animate-spin uc-h-12 uc-w-12 uc-text-accents-blue">...</svg> <!-- xl -->

With Label

Spinner accompanied by a text label.

html
Loading...
Please wait while we process your request...
Loading content... 
<!-- Horizontal -->
<div class="uc-flex uc-items-center uc-gap-3">
  <svg class="uc-animate-spin uc-h-5 uc-w-5 uc-text-accents-blue">...</svg>
  <span class="uc-text-sm uc-text-fg-disabled">Loading...</span>
</div>

<!-- Vertical / stacked -->
<div class="uc-flex uc-flex-col uc-items-center uc-gap-3">
  <svg class="uc-animate-spin uc-h-8 uc-w-8 uc-text-accents-blue">...</svg>
  <span class="uc-text-sm uc-text-fg-disabled">Loading content...</span>
</div>

Button with Spinner

Buttons showing a loading state with an embedded spinner.

html 
<button disabled class="uc-btn uc-btn-primary uc-opacity-70 uc-cursor-not-allowed">
  <svg class="uc-animate-spin uc-h-4 uc-w-4">...</svg>
  Loading...
</button>

Full Page Overlay

A spinner overlay covering the full page. Click the button to preview.

html

Loading, please wait...

(Click anywhere to dismiss)

<!-- Full page overlay -->
<div class="uc-fixed uc-inset-0 uc-z-[100]
  uc-bg-neutrals-surface/80
  uc-flex uc-flex-col uc-items-center uc-justify-center uc-gap-4">
  <svg class="uc-animate-spin uc-h-12 uc-w-12 uc-text-accents-blue">...</svg>
  <p class="uc-text-sm uc-text-fg-disabled">Loading, please wait...</p>
</div>

API Reference

All CSS classes available for the Spinner component.

Class Type Description
uc-animate-spin Animation Applies continuous rotation animation to the spinner
uc-h-4 uc-w-4 Size Small spinner (16px)
uc-h-6 uc-w-6 Size Medium spinner (24px, default)
uc-h-8 uc-w-8 Size Large spinner (32px)
uc-h-12 uc-w-12 Size Extra-large spinner (48px)
uc-text-accents-blue Color Primary spinner color
uc-text-fg-disabled Color Muted label text color
uc-opacity-70 State Reduced opacity for loading button state
uc-cursor-not-allowed State Not-allowed cursor for disabled loading buttons
uc-fixed uc-inset-0 Layout Full-page overlay positioning
uc-bg-neutrals-surface/80 Overlay Semi-transparent surface background for overlay

Accessibility

Keyboard and screen reader support.

Feature Details
Role Use role="status" on the spinner container for screen reader announcement
Label Add aria-label="Loading" or include sr-only "Loading..." text
Hidden Hide spinner from screen readers if a separate loading announcement exists
Motion Respect prefers-reduced-motion by reducing or pausing animation