# `PhiaUi.Components.Spinner`
[🔗](https://github.com/charlenopires/PhiaUI/blob/v0.1.17/lib/phia_ui/components/feedback/spinner.ex#L1)

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..." />

# `spinner`

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 to `nil`.

---

*Consult [api-reference.md](api-reference.md) for complete listing*