Spinner
Loading spinner components for indicating loading states with multiple variants and styles
Basic Usage
A simple spinner with default styling:
<neura::spinner />Variants
Multiple spinner variants for different use cases:
Default
Ring
Dual Ring
Dots
Pulse
Bars
Square
<neura::spinner variant="default" />
<neura::spinner variant="ring" />
<neura::spinner variant="dual-ring" />
<neura::spinner variant="dots" />
<neura::spinner variant="pulse" />
<neura::spinner variant="bars" />
<neura::spinner variant="square" />Sizes
Spinners come in multiple sizes:
xs
sm
md
lg
xl
2xl
3xl
<neura::spinner size="xs" />
<neura::spinner size="sm" />
<neura::spinner size="md" />
<neura::spinner size="lg" />
<neura::spinner size="xl" />
<neura::spinner size="2xl" />
<neura::spinner size="3xl" />Colors
Apply different colors to spinners:
Primary
Secondary
Success
Danger
Warning
Info
<neura::spinner color="primary" />
<neura::spinner color="secondary" />
<neura::spinner color="success" />
<neura::spinner color="danger" />
<neura::spinner color="warning" />
<neura::spinner color="info" />With Labels
Add text labels to spinners with different positions:
Loading...
Loading...
Loading...
Loading...
<neura::spinner label="Loading..." labelPosition="right" />
<neura::spinner label="Loading..." labelPosition="left" />
<neura::spinner label="Loading..." labelPosition="top" />
<neura::spinner label="Loading..." labelPosition="bottom" />Speed
Control the animation speed:
Slow
Normal
Fast
<neura::spinner speed="slow" />
<neura::spinner speed="normal" />
<neura::spinner speed="fast" />Use Cases
Common use cases for spinners:
Button Loading
Content Loading
Loading content...
Inline Loading
Fetching data
Full Page Loading
Please wait...
Properties
| Property | Type | Default | Description |
|---|---|---|---|
| size | string | md | Size (xs, sm, md, lg, xl, 2xl, 3xl) |
| variant | string | default | Style variant (default, ring, dual-ring, dots, pulse, bars, square) |
| color | string | primary | Color (primary, secondary, success, danger, warning, info, white, black, current) |
| label | string|null | null | Text label to display with spinner |
| labelPosition | string | right | Label position (top, bottom, left, right) |
| speed | string | normal | Animation speed (slow, normal, fast) |