Spinner
On this page
On this page
Spinner
Default large spinner without a text label.
Edit element properties
import '@rhds/elements/rh-spinner/rh-spinner.js';<rh-spinner></rh-spinner>import { Spinner } from "@rhds/elements/react/rh-spinner/rh-spinner.js";
// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.
export const Demo = () => (
<Spinner />
);Color Context
Spinner in all sizes adapting to light and dark color schemes.
Edit element properties
import '@rhds/elements/rh-spinner/rh-spinner.js';
import '@rhds/elements/lib/elements/rh-context-demo/rh-context-demo.js';<rh-context-demo>
<rh-spinner>
<p>Loading...</p>
</rh-spinner>
<rh-spinner size="md">
<p>Loading...</p>
</rh-spinner>
<rh-spinner size="sm">
<p>Loading...</p>
</rh-spinner>
</rh-context-demo>import { ContextDemo } from "@rhds/elements/react/rh-context-demo/rh-context-demo.js";
import { Spinner } from "@rhds/elements/react/rh-spinner/rh-spinner.js";
// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.
export const Demo = () => (
<ContextDemo>
<Spinner>
<p>Loading...</p>
</Spinner>
<Spinner size="md">
<p>Loading...</p>
</Spinner>
<Spinner size="sm">
<p>Loading...</p>
</Spinner>
</ContextDemo>
);Size Medium
Medium size spinner without a text label.
Edit element properties
import '@rhds/elements/rh-spinner/rh-spinner.js';<rh-spinner size="md"></rh-spinner>import { Spinner } from "@rhds/elements/react/rh-spinner/rh-spinner.js";
// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.
export const Demo = () => (
<Spinner size="md" />
);Size Small
Small size spinner without a text label.
Edit element properties
import '@rhds/elements/rh-spinner/rh-spinner.js';<rh-spinner size="sm"></rh-spinner>import { Spinner } from "@rhds/elements/react/rh-spinner/rh-spinner.js";
// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.
export const Demo = () => (
<Spinner size="sm" />
);With Text Label
Spinners in all three sizes with a text label.
Edit element properties
import '@rhds/elements/rh-spinner/rh-spinner.js';<rh-spinner>
<p>Loading...</p>
</rh-spinner>
<rh-spinner size="md">
<p>Loading...</p>
</rh-spinner>
<rh-spinner size="sm">
<p>Loading...</p>
</rh-spinner>import { Spinner } from "@rhds/elements/react/rh-spinner/rh-spinner.js";
// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.
export const Demo = () => (
<Spinner>
<p>Loading...</p>
</Spinner>
<Spinner size="md">
<p>Loading...</p>
</Spinner>
<Spinner size="sm">
<p>Loading...</p>
</Spinner>
);Spinner
Default large spinner without a text label.
Edit element properties
import '@rhds/elements/rh-spinner/rh-spinner.js';<rh-spinner></rh-spinner>import { Spinner } from "@rhds/elements/react/rh-spinner/rh-spinner.js";
// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.
export const Demo = () => (
<Spinner />
);Color Context
Spinner in all sizes adapting to light and dark color schemes.
Edit element properties
import '@rhds/elements/rh-spinner/rh-spinner.js';
import '@rhds/elements/lib/elements/rh-context-demo/rh-context-demo.js';<rh-context-demo>
<rh-spinner>
<p>Loading...</p>
</rh-spinner>
<rh-spinner size="md">
<p>Loading...</p>
</rh-spinner>
<rh-spinner size="sm">
<p>Loading...</p>
</rh-spinner>
</rh-context-demo>import { ContextDemo } from "@rhds/elements/react/rh-context-demo/rh-context-demo.js";
import { Spinner } from "@rhds/elements/react/rh-spinner/rh-spinner.js";
// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.
export const Demo = () => (
<ContextDemo>
<Spinner>
<p>Loading...</p>
</Spinner>
<Spinner size="md">
<p>Loading...</p>
</Spinner>
<Spinner size="sm">
<p>Loading...</p>
</Spinner>
</ContextDemo>
);Size Medium
Medium size spinner without a text label.
Edit element properties
import '@rhds/elements/rh-spinner/rh-spinner.js';<rh-spinner size="md"></rh-spinner>import { Spinner } from "@rhds/elements/react/rh-spinner/rh-spinner.js";
// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.
export const Demo = () => (
<Spinner size="md" />
);Size Small
Small size spinner without a text label.
Edit element properties
import '@rhds/elements/rh-spinner/rh-spinner.js';<rh-spinner size="sm"></rh-spinner>import { Spinner } from "@rhds/elements/react/rh-spinner/rh-spinner.js";
// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.
export const Demo = () => (
<Spinner size="sm" />
);With Text Label
Spinners in all three sizes with a text label.
Edit element properties
import '@rhds/elements/rh-spinner/rh-spinner.js';<rh-spinner>
<p>Loading...</p>
</rh-spinner>
<rh-spinner size="md">
<p>Loading...</p>
</rh-spinner>
<rh-spinner size="sm">
<p>Loading...</p>
</rh-spinner>import { Spinner } from "@rhds/elements/react/rh-spinner/rh-spinner.js";
// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.
export const Demo = () => (
<Spinner>
<p>Loading...</p>
</Spinner>
<Spinner size="md">
<p>Loading...</p>
</Spinner>
<Spinner size="sm">
<p>Loading...</p>
</Spinner>
);Other libraries
To learn more about our other libraries, visit this page.
Feedback
To give feedback about anything on this page, contact us.
