mirror of
https://github.com/hunvreus/basecoat.git
synced 2026-11-12 21:28:18 +00:00
139 lines
8.5 KiB
Plaintext
139 lines
8.5 KiB
Plaintext
# Spinner
|
|
|
|
<Callout title="No dedicated component" icon="circle-alert">
|
|
There is no dedicated Spinner component in Basecoat.
|
|
</Callout>
|
|
|
|
<Preview class="w-full max-w-xs">
|
|
<article class="item bg-muted/50 border-transparent">
|
|
<figure><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></figure>
|
|
<section> <h3>Processing payment...</h3></section>
|
|
<aside class="tabular-nums text-sm">$100.00</aside>
|
|
</article>
|
|
</Preview>
|
|
|
|
## Usage
|
|
|
|
<Steps>
|
|
<Step title="Include CSS">
|
|
|
|
Import Tailwind and one full Basecoat style bundle.
|
|
|
|
```css
|
|
@import "tailwindcss";
|
|
@import "basecoat-css/vega.css";
|
|
```
|
|
|
|
Or import Tailwind only when the component is not composed with other Basecoat components.
|
|
|
|
```css
|
|
@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](/installation).
|
|
|
|
</Step>
|
|
<Step title="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.
|
|
|
|
```html
|
|
<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>
|
|
```
|
|
|
|
</Step>
|
|
</Steps>
|
|
|
|
## Examples
|
|
|
|
### Size
|
|
|
|
Use the `size-*` utility class to change the size of the spinner.
|
|
|
|
<Preview>
|
|
<div class="flex items-center gap-6"><svg aria-label="Loading" role="status" class="size-3 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><svg aria-label="Loading" role="status" class="size-4 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><svg aria-label="Loading" role="status" class="size-6 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><svg aria-label="Loading" role="status" class="size-8 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></div>
|
|
</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.
|
|
|
|
<Preview>
|
|
<div class="flex flex-col items-center gap-4">
|
|
<button class="btn" data-size="sm" disabled><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>
|
|
Loading...
|
|
</button>
|
|
<button class="btn" data-variant="outline" data-size="sm" disabled><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>
|
|
Please wait
|
|
</button>
|
|
<button class="btn" data-variant="secondary" data-size="sm" disabled><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>
|
|
Processing
|
|
</button>
|
|
</div>
|
|
</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.
|
|
|
|
<Preview>
|
|
<div class="flex items-center gap-4">
|
|
<span class="badge"><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>
|
|
Syncing
|
|
</span>
|
|
<span class="badge" data-variant="secondary"><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>
|
|
Updating
|
|
</span>
|
|
<span class="badge" data-variant="outline"><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>
|
|
Processing
|
|
</span>
|
|
</div>
|
|
</Preview>
|
|
|
|
### Input group
|
|
|
|
<Preview class="w-full max-w-md">
|
|
<div class="flex w-full max-w-md flex-col gap-4">
|
|
<div class="input-group">
|
|
<input placeholder="Send a message..." disabled />
|
|
<span data-align="inline-end"><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></span>
|
|
</div>
|
|
<div class="input-group">
|
|
<textarea placeholder="Send a message..." disabled></textarea>
|
|
<footer data-align="block-end"><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>
|
|
Validating...
|
|
<button type="button" class="btn ms-auto" data-size="icon-sm"><svg class="lucide lucide-arrow-up" 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="m5 12 7-7 7 7" /><path d="M12 19V5" /></svg>
|
|
<span class="sr-only">Send</span>
|
|
</button>
|
|
</footer>
|
|
</div>
|
|
</div>
|
|
</Preview>
|
|
|
|
### Empty
|
|
|
|
<Preview class="w-full">
|
|
<div class="empty w-full">
|
|
<header>
|
|
<figure><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></figure>
|
|
<h3>Processing your request</h3>
|
|
<p>Please wait while we process your request. Do not refresh the page.</p>
|
|
</header>
|
|
<section> <button class="btn" data-variant="outline" data-size="sm">Cancel</button></section>
|
|
</div>
|
|
</Preview>
|
|
|
|
## RTL
|
|
|
|
Spinner layout follows document direction. Use logical utilities when surrounding spacing depends on direction.
|
|
|
|
<Preview class="w-full max-w-xs">
|
|
<article class="item bg-muted/50 border-transparent" dir="rtl">
|
|
<figure><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></figure>
|
|
<section> <h3>جاري معالجة الدفع...</h3></section>
|
|
<aside class="tabular-nums text-sm">١٠٠.٠٠ دولار</aside>
|
|
</article>
|
|
</Preview>
|