# Spinner
{"Submitting Contact Form..."}
```astro --- --- Submitting Contact Form... ``` ## Installation ```bash bunx bejamas add spinner ``` ```bash npx bejamas add spinner ``` ```bash pnpm dlx bejamas add spinner ``` ```bash yarn dlx bejamas add spinner ``` ## Usage ```astro nocollapse --- --- ``` ## Customization You can replace the default spinner icon with any other icon by editing the `Spinner` component. ```astro showLineNumbers title="components/ui/spinner/Spinner.astro" nocollapse nopreview --- const { class: className = "", ...props } = Astro.props; --- ``` ## Examples ### Size Use the `size-*` utility class to change the size of the spinner.
```astro --- ---
``` ### Button Add a spinner to a button to indicate a loading state. Remember to use the `data-icon` attribute for proper spacing.
```astro --- ---
``` ### Badge Add a spinner to a badge to indicate a loading state.
{" Syncing "} {" Updating "} {" Processing "}
```astro --- ---
Syncing Updating Processing
``` ### Input Group
{" Validating... "} {"Send"}
```astro --- ---
Validating... Send
```