Spinner
Usage
Include CSS
Import Tailwind and one full A3S UI style bundle.
Or import Tailwind only when the component is not composed with other A3S UI components.
Spinner is pure HTML plus Tailwind utilities and has no dedicated component CSS file.
Using CDN or bundler imports? See the Installation page.
Add your spinner HTML
Spinners are pure HTML using the loader-circle Lucide icon with the animate-spin Tailwind utility. Add role="status" and aria-label="Loading" for accessibility.
Examples
Size
Use the size-* utility class to change the size of the spinner.
Button
Add a spinner to a button to indicate a loading state. Place the spinner before or after the label; button spacing is handled automatically.
Badge
Add a spinner to a badge to indicate a loading state. Place the spinner before or after the label; badge spacing is handled automatically.
Syncing
Updating
Processing
Input group
Empty
Processing your request
Please wait while we process your request. Do not refresh the page.
RTL
Spinner layout follows document direction. Use logical utilities when surrounding spacing depends on direction.