Spinner
Animated loading spinner in three sizes.
<arc-spinner> Overview
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 animation for smooth spinning
- Inline-flex display for easy placement beside text or inside buttons
- Built-in `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