Component contract

loader

Indeterminate loading indicator built from the chiralkit logo path — two mirrored halves oscillate around the ring center.

Version: v1.0.0

Props

Name	Type	Values	Default
size	enum	sm, md, lg	md
label	string	—	Loading
speed	enum	slow, normal, fast	normal

category: static-display
native_element: span (custom element host)
role: status
labeling: aria-label (from `label` prop, default 'Loading')
reduced_motion: collapses swing rotation to a static opacity pulse (2s ease-in-out); no rotation, no translation
notes: Indeterminate progress indicator — no APG pattern applies (not a `progressbar`). Inner SVG is aria-hidden; host is the accessibility surface. Stroke inherits `currentColor`; consumers verify ≥ 3:1 non-text contrast (WCAG 1.4.11) against the surface.

Raw validated JSON

{
  "name": "loader",
  "version": "1.0.0",
  "props": {
    "size": {
      "type": "enum",
      "values": [
        "sm",
        "md",
        "lg"
      ],
      "default": "md"
    },
    "label": {
      "type": "string",
      "default": "Loading"
    },
    "speed": {
      "type": "enum",
      "values": [
        "slow",
        "normal",
        "fast"
      ],
      "default": "normal"
    }
  },
  "a11y": {
    "category": "static-display",
    "native_element": "span (custom element host)",
    "role": "status",
    "labeling": "aria-label (from `label` prop, default 'Loading')",
    "reduced_motion": "collapses swing rotation to a static opacity pulse (2s ease-in-out); no rotation, no translation",
    "notes": "Indeterminate progress indicator — no APG pattern applies (not a `progressbar`). Inner SVG is aria-hidden; host is the accessibility surface. Stroke inherits `currentColor`; consumers verify ≥ 3:1 non-text contrast (WCAG 1.4.11) against the surface."
  }
}

Props

Accessibility