Skip to content
Aggarly OS
  • Getting Started
    • Introduction
  • Foundations
    • Colors
    • Spacing
    • Radius
    • Typography
    • Shadows
    • Z-Index
    • Gradients
    • Tokens
    • RTL & Direction
    • Theming
  • Layout
    • Containers
    • Grid System
    • Layout Utilities
  • Components
    • Alerts
    • Avatars
    • Buttons
    • Button Group
    • Badges
    • Inputs
    • Select
    • Checkbox
    • Counters-timers
    • Radio
    • Switch
    • Stepper
    • Select-pro
    • Cards
    • Modals
    • Dropdown
    • Popover
    • Tooltip
    • Accordion
    • Breadcrumb
    • Tabs
    • Navbar
    • List Group
    • Toasts
    • Skeleton
    • Pagination
    • Progress
    • Table
    • Icons
    • Form
    • Ribbons
    • Spinner
    • Offcanvas
    • Feedback
    • Grid
    • Data UI
  • Data UI
    • Overview
  • Platform
    • Reference DataCore
  • Widgets
    • KPI
    • Analytics
    • Behavior
  • Brand
    • Logo
    • Brand Usage
Components/Spinner

Spinners

Spinners communicate background activity (loading, syncing, saving). Aggarly Platform spinners are token-driven, theme-safe, reduced-motion safe, and include accessible status labeling. Brand spinners use the Aggarly icon for premium enterprise experiences.

Border Spinner

Classic ring spinner for general loading states.

LoadingPrimaryLoadingNeutral
Show code
Border spinner (JSX)
import { Spinner } from "@/design-system/components/Spinner";

export function Example() {
  return <Spinner variant="border" tone="primary" size="md" />;
}

Ring Spinner (Premium)

Conic ring with a subtle drop-shadow. Recommended default for enterprise surfaces.

LoadingPrimaryLoadingSecondary
Show code
Ring spinner (JSX)
import { Spinner } from "@/design-system/components/Spinner";

export function Example() {
  return <Spinner variant="ring" tone="primary" size="md" />;
}

Bars Spinner

Enterprise “equalizer” spinner for background processing and inline toolbars.

LoadingNeutralLoadingPrimary
Show code
Bars spinner (JSX)
import { Spinner } from "@/design-system/components/Spinner";

export function Example() {
  return <Spinner variant="bars" tone="neutral" size="md" />;
}

Speed

Use speed to tune motion density across surfaces (slow for dashboards, fast for micro-loaders).

LoadingSlowLoadingNormalLoadingFast
Show code
Speed (JSX)
import { Spinner } from "@/design-system/components/Spinner";

export function Example() {
  return (
    <>
      <Spinner variant="ring" speed="slow" />
      <Spinner variant="ring" speed="normal" />
      <Spinner variant="ring" speed="fast" />
    </>
  );
}

Growing Spinner

Pulse / grow spinner for saving or background processing.

SavingSuccessValidatingWarning
Show code
Grow spinner (JSX)
import { Spinner } from "@/design-system/components/Spinner";

export function Example() {
  return <Spinner variant="grow" tone="success" size="md" label="Saving..." />;
}

Dots Spinner

Compact dots spinner for dense UIs (tables, toolbars, inline loaders).

LoadingNeutralLoadingPrimary
Show code
Dots spinner (JSX)
import { Spinner } from "@/design-system/components/Spinner";

export function Example() {
  return <Spinner variant="dots" tone="neutral" size="sm" />;
}

A11y Best Practice: Decorative Mode

When the UI already shows visible text like “Saving…”, set a11y="decorative" so screen readers are not double-announced.

Saving…
Show code
a11y="decorative" (JSX)
import { Spinner } from "@/design-system/components/Spinner";

export function Example() {
  return (
    <div className="spinners-row">
      <span className="spinner-sample">
        <Spinner variant="dots" size="sm" tone="primary" a11y="decorative" />
        <span className="spinner-sample__label">Saving…</span>
      </span>
    </div>
  );
}

All Colors (Tones)

Tone controls spinner color using token RGB channels.

LoadingPrimaryLoadingSecondaryLoadingSuccessLoadingWarningLoadingDangerLoadingNeutral
Show code
Tone variants (JSX)
import { Spinner } from "@/design-system/components/Spinner";

export function Example() {
  return (
    <>
      <Spinner tone="primary" />
      <Spinner tone="secondary" />
      <Spinner tone="success" />
      <Spinner tone="warning" />
      <Spinner tone="danger" />
      <Spinner tone="neutral" />
    </>
  );
}

Brand Spinners

Premium spinners using /assets/icons/thera-icon.svg (CSS mask for tone control). Includes scan variant.

LoadingRotateLoadingOrbitLoadingPulseLoadingConicLoadingScan
Show code
Brand spinners (JSX)
import { BrandSpinner } from "@/design-system/components/Spinner";

export function Example() {
  return (
    <>
      <BrandSpinner variant="rotate" tone="primary" iconUrl="/assets/icons/thera-icon.svg" />
      <BrandSpinner variant="orbit" tone="secondary" iconUrl="/assets/icons/thera-icon.svg" />
      <BrandSpinner variant="pulse" tone="success" iconUrl="/assets/icons/thera-icon.svg" />
      <BrandSpinner variant="conic" tone="primary" iconUrl="/assets/icons/thera-icon.svg" />
      <BrandSpinner variant="scan" tone="primary" iconUrl="/assets/icons/thera-icon.svg" />
    </>
  );
}

Spinner Overlay

Enterprise overlay pattern for blocking sections during long operations (exports, sync, migrations).

Reports

Generating export…

Exporting report
This can take up to a minute
Show code
SpinnerOverlay (JSX)
import { SpinnerOverlay } from "@/design-system/components/Spinner";

export function Example() {
  return (
    <div className="spinner-overlay-surface">
      <div className="spinner-overlay-surface__content">
        <p className="spinner-overlay-surface__title">Reports</p>
        <p className="spinner-overlay-surface__desc">Generating export…</p>
      </div>

      <SpinnerOverlay
        variant="ring"
        tone="primary"
        label="Exporting report"
        description="This can take up to a minute"
        scrim="soft"
        blur
      />
    </div>
  );
}