<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
- Use a spinner when the content shape is predictable — prefer skeleton placeholders
- Place multiple spinners on the same screen simultaneously
- Use the lg spinner inline with text — it overwhelms surrounding content
- Rely solely on the spinner for status — combine with aria-live regions when appropriate
- Use the primary variant on a primary-coloured background — it becomes invisible
Features
- Three size presets: sm (16px), md (24px), lg (40px) with proportional border widths
- Three colour 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 colour 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';
<Spinner size="sm"></Spinner>
<Spinner size="md"></Spinner>
<Spinner size="lg"></Spinner><script setup>
import { Spinner } from '@arclux/arc-ui-vue';
</script>
<template>
<Spinner size="sm"></Spinner>
<Spinner size="md"></Spinner>
<Spinner size="lg"></Spinner>
</template><script>
import { Spinner } from '@arclux/arc-ui-svelte';
</script>
<Spinner size="sm"></Spinner>
<Spinner size="md"></Spinner>
<Spinner size="lg"></Spinner>import { Component } from '@angular/core';
import { Spinner } from '@arclux/arc-ui-angular';
@Component({
imports: [Spinner],
template: `
<Spinner size="sm"></Spinner>
<Spinner size="md"></Spinner>
<Spinner size="lg"></Spinner>
`,
})
export class MyComponent {}import { Spinner } from '@arclux/arc-ui-solid';
<Spinner size="sm"></Spinner>
<Spinner size="md"></Spinner>
<Spinner size="lg"></Spinner>import { Spinner } from '@arclux/arc-ui-preact';
<Spinner size="sm"></Spinner>
<Spinner size="md"></Spinner>
<Spinner size="lg"></Spinner><!-- 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
| Prop | Type | Default | Description |
|---|---|---|---|
size | 'sm' | 'md' | 'lg' | 'md' | Spinner dimensions: sm (16px), md (24px), lg (40px) |
variant | 'primary' | 'secondary' | 'white' | 'primary' | Colour of the spinner ring |