Feedback & status
Orbital Loader
Layered orbital loading indicator
detent-orbital-loader
Port status
- Catalog status
- implemented
- Origin
- upstream
- Phase
- 2
- Wave
- phase-2-feedback
- Group
- Feedback & status
2.6 KB gzip for the class module
Variants
The remaining densities, sizes and speed multipliers. The rhythm is pure CSS; under
prefers-reduced-motion: reduce the rings stay painted but every animation is removed.
Recorded states
loadingrecorded state; no setterreduced motionrecorded state; no setter
Usage
Import
import '/components/orbital-loader/define.js';
// or register it yourself
import { DetentOrbitalLoader } from '/components/orbital-loader/orbital-loader.js';Attributes
labelsizespeedvariant
Properties
No properties are recorded for this component.
Slots
No slots are recorded for this component.
Events
No events are recorded for this component.
Example
Runnable example: site/examples/orbital-loader.ts. The snippet below is generated from the catalogued attributes.
<detent-orbital-loader
label="Loading"
size="72"
speed="1"
variant="default"
></detent-orbital-loader>Source
The pinned upstream source for this row:
src/components/ui/OrbitalLoadingRing.tsxsha256 b489c09ff7ea…
Native files
The native module and its artifacts:
src/components/orbital-loader/orbital-loader.tssrc/components/orbital-loader/styles.csssrc/components/orbital-loader/define.tsdocs/components/orbital-loader.mdsite/examples/orbital-loader.tstests/browser/orbital-loader.spec.tsevidence/components/orbital-loader.md
API
Boolean attributes follow HTML presence semantics: present means true, absent means false, and disabled="false" still means disabled.
Attributes
| Attribute | Property | Type | Default | Notes |
|---|---|---|---|---|
label | label | string | 'Loading' | Kebab-case attribute; camelCase property. |
size | size | number | 72 | Kebab-case attribute; camelCase property. |
speed | speed | number | 1 | Kebab-case attribute; camelCase property. |
variant | variant | 'default' | 'dense' | 'minimal' | 'default' | Kebab-case attribute; camelCase property. |
Properties
No property-only values are recorded for this component.
Events
No custom events are recorded for this component.
Slots
No slots are recorded for this component.
CSS customisation
- React state/hooks replaced by element-owned state with pre-upgrade property preservation.
- White/zinc dark-only palette replaced by shared tokens with hex fallbacks (marks = --detent-color-text, tracks = --detent-color-border/-strong), so the ring is visible in light and dark; accessibility correction (PC-9.5/12.6).
- className/style pass-through props replaced by parts ring/tracks/orbit-outer/orbit-inner/satellite/core and `--detent-orbital-size`/`--detent-orbit-speed`.
- aria-label kept, duplicated sr-only span dropped (one announcement, PC-12.5).
- Reduced motion and disconnection remove the animations in CSS (`animation: none`) instead of pausing them, and disconnect additionally cancels the Animation objects.
- Property setters exist for the four scalar attributes although the row records no properties (attribute-first API, PC-3.1).
What it does
Two counter-rotating orbits carry satellites around a pulsing core, over two static tracks.
Upstream behaviour
- Two coordinated orbital rhythms with a subtle center pulse
- Size, speed, and density variants
- No external runtime beyond React
Differences from upstream
- React state/hooks replaced by element-owned state with pre-upgrade property preservation.
- White/zinc dark-only palette replaced by shared tokens with hex fallbacks (marks = --detent-color-text, tracks = --detent-color-border/-strong), so the ring is visible in light and dark; accessibility correction (PC-9.5/12.6).
- className/style pass-through props replaced by parts ring/tracks/orbit-outer/orbit-inner/satellite/core and `--detent-orbital-size`/`--detent-orbit-speed`.
- aria-label kept, duplicated sr-only span dropped (one announcement, PC-12.5).
- Reduced motion and disconnection remove the animations in CSS (`animation: none`) instead of pausing them, and disconnect additionally cancels the Animation objects.
- Property setters exist for the four scalar attributes although the row records no properties (attribute-first API, PC-3.1).