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 previewHTML · CSS · JavaScript

      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.

      <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 previewHTML · CSS · JavaScript

      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 previewHTML · CSS · JavaScript

      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 previewHTML · CSS · JavaScript

      Syncing

      Updating

      Processing

      Input group

      Live previewHTML · CSS · JavaScript

      Validating...

      Empty

      Live previewHTML · CSS · JavaScript

      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 previewHTML · CSS · JavaScript

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