For AI agents: the complete documentation index is available at https://a3s-lab.github.io/UI/en/llms.txt, the full documentation bundle is available at https://a3s-lab.github.io/UI/en/llms-full.txt, and this page is available as Markdown at https://a3s-lab.github.io/UI/en/components/spinner.md.
A3S UI
  • English
  • next

      • Spinner

      Live preview

      Processing payment...

      Usage

      Include CSS

      Import Tailwind and one full A3S UI style bundle.

      @import "tailwindcss";
@import "@a3s-lab/ui/a3s.css";

      Or import Tailwind only when the component is not composed with other A3S UI components.

      @import "tailwindcss";

      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.

      The complete A3S UI stylesheet stops the rotation when the user requests reduced motion. Keep the accessible label and nearby status copy so progress remains understandable while the glyph is static.

      <svg aria-label="Loading" role="status" class="animate-spin lucide lucide-loader-circle" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-6.219-8.56" /></svg>

      Examples

      Size

      Use the size-* utility class to change the size of the spinner.

      Live preview

      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.

      Live preview

      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.

      Live preview
      SyncingUpdatingProcessing

      Input group

      Live preview

      Validating...

      Empty

      Live preview

      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.

      Live preview

      جاري معالجة الدفع...