Spinner

Slider
Switch

Spinner

No dedicated component

There is no dedicated Spinner component in Basecoat.

Processing payment…

Usage

Include CSS

Import Tailwind and one full Basecoat style bundle.

@import "tailwindcss";
@import "basecoat-css/vega.css";

Or import Tailwind only when the component is not composed with other Basecoat 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.

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.

SyncingUpdatingProcessing

Input group

Validating…

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.

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