Animated loading spinner component.
A circular SVG spinner that inherits color from currentColor (i.e. the
surrounding text color). Use Tailwind color utilities on the spinner itself
or any ancestor element to control the spinner color.
Sizes
| Size | Dimensions |
|---|---|
:xs | h-3 w-3 |
:sm | h-4 w-4 |
:default | h-6 w-6 |
:lg | h-8 w-8 |
:xl | h-12 w-12 |
Examples
<%!-- Default spinner with "Loading" screen-reader label --%>
<.spinner />
<%!-- Large spinner --%>
<.spinner size={:lg} />
<%!-- Spinner with custom color via text utility --%>
<.spinner class="text-primary" />
<%!-- Spinner with custom accessible label --%>
<.spinner label="Loading data..." />Summary
Functions
Renders an animated SVG circular spinner.
Functions
Renders an animated SVG circular spinner.
The spinner uses role="status", aria-live="polite", and an
aria-label attribute for full screen-reader support. A <span class="sr-only"> containing the label text is also rendered inside the
wrapper so screen readers that do not announce aria-label on non-focusable
elements still receive the label.
Color is inherited from currentColor, so wrapping the spinner in a
text-* utility class (or placing the spinner inside an already-colored
element) is the recommended way to control the spinner color.
Examples
<.spinner />
<.spinner size={:xl} label="Uploading file..." class="text-primary" />Attributes
size(:atom) - Controls the width and height of the spinner SVG. Defaults to:default. Must be one of:xs,:sm,:default,:lg, or:xl.label(:string) - Accessible label — rendered as aria-label and as sr-only text inside the spinner. Defaults to"Loading".class(:string) - Additional CSS classes merged onto the SVG element via cn/1. Defaults tonil.