Spinner Since v1.0.0

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 />
);

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>
);

.example-flex {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rh-space-2xl, 32px);
  align-items: center;
}
.felt-preview {
  padding: var(--rh-space-2xl, 32px);
}

import '@rhds/elements/rh-spinner/rh-spinner.js';

// Temporary test: validate stroke-width pulse works at 15% keyframe.
// If var() were used inside @keyframes, this would fail in Firefox (bug 1763376).
(async () => {
  const spinner = document.querySelector('rh-spinner:not([size])');
  await customElements.whenDefined('rh-spinner');
  await spinner.updateComplete;
  const circle = spinner.shadowRoot.querySelector('circle.dash');
  circle.style.animationPlayState = 'paused';
  circle.style.animationDelay = '-0.21s'; // 15% of 1.4s
  await new Promise(r => requestAnimationFrame(r));
  const sw = parseFloat(getComputedStyle(circle).strokeWidth);
  console.log(`[felt-dash test] stroke-width at 15%: ${sw} (expected 6)`);
  console.assert(sw === 6, `FAIL: stroke-width is ${sw}, expected 6`);
  circle.style.animationPlayState = '';
  circle.style.animationDelay = '';
})();

<link rel="stylesheet" href="/theming/themes/project-felt/preview/felt-theme-preview.css">



<div class="felt-preview">
  <div class="example-flex">
    <rh-spinner size="xl"></rh-spinner>
    <rh-spinner></rh-spinner>
    <rh-spinner size="md"></rh-spinner>
    <rh-spinner size="sm"></rh-spinner>
  </div>
</div>

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 = () => (
  <link rel="stylesheet" href="/theming/themes/project-felt/preview/felt-theme-preview.css" />
  <div className="felt-preview">
    <div className="example-flex">
      <Spinner size="xl" />
      <Spinner />
      <Spinner size="md" />
      <Spinner size="sm" />
    </div>
  </div>
);

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" />
);

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" />
);

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>
);