Spinner
Animated loading spinner in three sizes.
<arc-spinner>Overview
Spinner is a rotating loading indicator for actions where content shape is unknown or a skeleton layout is impractical. It renders a circular border element with one transparent edge that spins continuously at 0.75-second intervals, the classic loading ring. Use it for button loading states, inline status indicators, and overlay loading screens.
Three size presets control the spinner dimensions: sm (16px, 2px border) is compact enough for inline use next to text or inside buttons, md (24px, 2.5px border) is the default for general loading states, and lg (40px, 3px border) suits page-level or overlay loading indicators. The border width scales proportionally with size to maintain visual balance.
Three color variants (primary, secondary, and white) let you match the spinner to its context. Primary uses the accent-primary color, secondary aligns with accent-secondary areas, and white works on dark backgrounds or inside filled buttons. The component includes role="status" and aria-label="Loading" for screen reader users.
Guidelines
When to use
- Use sm size inside buttons to indicate a pending action
- Use lg size for full-page or overlay loading states
- Choose the white variant when placing a spinner on a filled or dark background
- Pair with a text label ("Loading...") for screen readers and sighted users alike
- Remove the spinner immediately when loading completes; avoid artificial delays
When not to use
- Do not use a spinner when the content shape is predictable; prefer skeleton placeholders
- Do not place multiple spinners on the same screen simultaneously
- Do not use the lg spinner inline with text: it overwhelms surrounding content
- Do not rely solely on the spinner for status; combine with aria-live regions when appropriate
- Do not use the primary variant on a primary-colored background: it becomes invisible
Features
- Three size presets: sm (16px), md (24px), lg (40px) with proportional border widths
- Three color variants: primary (`--accent-primary`), secondary (`--accent-secondary`), white (`--text-primary`)
- Continuous 0.75s linear rotation
- Inline-flex display for placing beside text or inside buttons
- `role="status"` and aria-label="Loading" for accessibility
- CSS part (spinner) for custom animation or color overrides
- Lightweight implementation: single div element with border animation
Preview
Usage
<arc-spinner size="sm"></arc-spinner>
<arc-spinner size="md"></arc-spinner>
<arc-spinner size="lg"></arc-spinner>import { Spinner } from '@arclux/arc-ui-react';
export default function Example() {
return (
<>
<Spinner size="sm" />
<Spinner size="md" />
<Spinner size="lg" />
</>
);
}<script setup>
import { Spinner } from '@arclux/arc-ui-vue';
</script>
<template>
<Spinner size="sm" />
<Spinner size="md" />
<Spinner size="lg" />
</template><script>
import { Spinner } from '@arclux/arc-ui-svelte';
</script>
<Spinner size="sm" />
<Spinner size="md" />
<Spinner size="lg" />import { Component } from '@angular/core';
import { Spinner } from '@arclux/arc-ui-angular';
@Component({
imports: [Spinner],
template: `
<arc-spinner size="sm"></arc-spinner>
<arc-spinner size="md"></arc-spinner>
<arc-spinner size="lg"></arc-spinner>
`,
})
export class MyComponent {}import { Spinner } from '@arclux/arc-ui-solid';
export default function Example() {
return (
<>
<Spinner size="sm" />
<Spinner size="md" />
<Spinner size="lg" />
</>
);
}import { Spinner } from '@arclux/arc-ui-preact';
export default function Example() {
return (
<>
<Spinner size="sm" />
<Spinner size="md" />
<Spinner size="lg" />
</>
);
}<!-- Auto-generated by @arclux/prism — do not edit manually -->
<!-- arc-spinner — requires spinner.css + base.css (or arc-ui.css) -->
<span class="arc-spinner">
<div
class="spinner"
role="status"
aria-label="Loading"
></div>
</span><!-- Auto-generated by @arclux/prism — do not edit manually -->
<!-- arc-spinner — self-contained, no external CSS needed -->
<span class="arc-spinner" style="display: inline-flex">
<div
style="border-radius: 9999px; border-style: solid; border-color: rgb(77, 126, 247); border-top-color: transparent; animation: spin 0.75s linear infinite; box-sizing: border-box"
role="status"
aria-label="Loading"
></div>
</span>API
size'sm' | 'md' | 'lg''md'- Spinner dimensions: sm (16px), md (24px), lg (40px)
variant'primary' | 'secondary' | 'white''primary'- Color of the spinner ring