diff --git a/.config/cem.yaml b/.config/cem.yaml
index febc90fcec..86f5f070a6 100644
--- a/.config/cem.yaml
+++ b/.config/cem.yaml
@@ -1,5 +1,6 @@
 sourceControlRootUrl: https://github.com/patternfly/patternfly-elements/tree/main/
 generate:
+  output: ./elements/custom-elements.json
   files:
     - ./elements/*/*.ts
     - ./core/*/*.ts
diff --git a/elements/package.json b/elements/package.json
index fe8dda2080..6e3341d464 100644
--- a/elements/package.json
+++ b/elements/package.json
@@ -49,6 +49,7 @@
     "./pf-v5-progress/pf-v5-progress.js": "./pf-v5-progress/pf-v5-progress.js",
     "./pf-v5-search-input/pf-v5-search-input.js": "./pf-v5-search-input/pf-v5-search-input.js",
     "./pf-v5-spinner/pf-v5-spinner.js": "./pf-v5-spinner/pf-v5-spinner.js",
+    "./pf-v6-spinner/pf-v6-spinner.js": "./pf-v6-spinner/pf-v6-spinner.js",
     "./pf-v5-switch/pf-v5-switch.js": "./pf-v5-switch/pf-v5-switch.js",
     "./pf-v5-table/context.js": "./pf-v5-table/context.js",
     "./pf-v5-table/pf-v5-caption.js": "./pf-v5-table/pf-v5-caption.js",
diff --git a/elements/pf-v6-spinner/demo/basic.html b/elements/pf-v6-spinner/demo/basic.html
new file mode 100644
index 0000000000..38bfd69761
--- /dev/null
+++ b/elements/pf-v6-spinner/demo/basic.html
@@ -0,0 +1,17 @@
+---
+name: Basic
+description: A basic spinner indicates that an action is in progress.
+---
+<section>
+  <pf-v6-spinner accessible-label="Loading contents">Loading...</pf-v6-spinner>
+</section>
+
+<script type="module">
+  import '@patternfly/elements/pf-v6-spinner/pf-v6-spinner.js';
+</script>
+
+<style>
+  section {
+    padding: 1em;
+  }
+</style>
diff --git a/elements/pf-v6-spinner/demo/custom-size.html b/elements/pf-v6-spinner/demo/custom-size.html
new file mode 100644
index 0000000000..5c0b3f6d31
--- /dev/null
+++ b/elements/pf-v6-spinner/demo/custom-size.html
@@ -0,0 +1,17 @@
+---
+name: Custom size
+description: A spinner can have a custom diameter using the `diameter` attribute.
+---
+<section>
+  <pf-v6-spinner diameter="80px" accessible-label="Custom size spinner">Loading...</pf-v6-spinner>
+</section>
+
+<script type="module">
+  import '@patternfly/elements/pf-v6-spinner/pf-v6-spinner.js';
+</script>
+
+<style>
+  section {
+    padding: 1em;
+  }
+</style>
diff --git a/elements/pf-v6-spinner/demo/inline-size.html b/elements/pf-v6-spinner/demo/inline-size.html
new file mode 100644
index 0000000000..ac12dc37a2
--- /dev/null
+++ b/elements/pf-v6-spinner/demo/inline-size.html
@@ -0,0 +1,35 @@
+---
+name: Inline size
+description: An inline spinner inherits its font size, so its size will match the content around it.
+---
+<section>
+  <h1>
+    Heading
+    <pf-v6-spinner inline accessible-label="Spinner in a heading">Loading...</pf-v6-spinner>
+  </h1>
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed hendrerit nisi in cursus maximus.</p>
+  <h2>
+    Second level
+    <pf-v6-spinner inline accessible-label="Spinner in a subheading">Loading...</pf-v6-spinner>
+  </h2>
+  <p>
+    Curabitur accumsan turpis pharetra blandit. Quisque condimentum maximus mi,
+    <pf-v6-spinner inline accessible-label="Spinner in a paragraph">Loading...</pf-v6-spinner>
+    sit amet commodo arcu rutrum id. Proin pretium urna vel cursus venenatis.
+    Suspendisse potenti.
+  </p>
+  <small>
+    Sometimes you need small text
+    <pf-v6-spinner inline accessible-label="Spinner in small text">Loading...</pf-v6-spinner>
+  </small>
+</section>
+
+<script type="module">
+  import '@patternfly/elements/pf-v6-spinner/pf-v6-spinner.js';
+</script>
+
+<style>
+  section {
+    padding: 1em;
+  }
+</style>
diff --git a/elements/pf-v6-spinner/demo/size-variations.html b/elements/pf-v6-spinner/demo/size-variations.html
new file mode 100644
index 0000000000..16c5cd04af
--- /dev/null
+++ b/elements/pf-v6-spinner/demo/size-variations.html
@@ -0,0 +1,24 @@
+---
+name: Size variations
+description: Spinners can be sized using the `size` attribute with values `xs`, `sm`, `md`, `lg`, and `xl`.
+---
+<section>
+  <pf-v6-spinner size="xs" accessible-label="Extra small spinner">Loading...</pf-v6-spinner>
+  <pf-v6-spinner size="sm" accessible-label="Small spinner">Loading...</pf-v6-spinner>
+  <pf-v6-spinner size="md" accessible-label="Medium spinner">Loading...</pf-v6-spinner>
+  <pf-v6-spinner size="lg" accessible-label="Large spinner">Loading...</pf-v6-spinner>
+  <pf-v6-spinner size="xl" accessible-label="Extra large spinner">Loading...</pf-v6-spinner>
+</section>
+
+<script type="module">
+  import '@patternfly/elements/pf-v6-spinner/pf-v6-spinner.js';
+</script>
+
+<style>
+  section {
+    display: flex;
+    align-items: center;
+    gap: 1em;
+    padding: 1em;
+  }
+</style>
diff --git a/elements/pf-v6-spinner/pf-v6-spinner.css b/elements/pf-v6-spinner/pf-v6-spinner.css
new file mode 100644
index 0000000000..cbe75ade0d
--- /dev/null
+++ b/elements/pf-v6-spinner/pf-v6-spinner.css
@@ -0,0 +1,112 @@
+:host {
+  display: inline-block;
+  width: min-content;
+  min-height: 0;
+  aspect-ratio: 1 / 1;
+}
+
+[hidden] {
+  display: none !important;
+}
+
+svg {
+  overflow: hidden;
+  width: var(--pf-v6-c-spinner--Width,
+    var(--pf-v6-c-spinner--diameter,
+      var(--pf-t--global--icon--size--2xl, 3.5rem)));
+  height: var(--pf-v6-c-spinner--Height,
+    var(--pf-v6-c-spinner--diameter,
+      var(--pf-t--global--icon--size--2xl, 3.5rem)));
+  animation:
+    rotate
+    calc(var(--pf-v6-c-spinner--AnimationDuration, 1.4s) * 2)
+    var(--pf-v6-c-spinner--AnimationTimingFunction, linear) infinite;
+}
+
+circle {
+  width: 100%;
+  height: 100%;
+  transform-origin: 50% 50%;
+  stroke-linecap: round;
+  stroke-dasharray: 283;
+  stroke-dashoffset: 280;
+  stroke: var(--pf-v6-c-spinner--Color,
+    var(--pf-t--global--icon--color--brand--default, #0066cc));
+  stroke-width: var(--pf-v6-c-spinner--StrokeWidth, 10);
+  animation:
+    dash
+    var(--pf-v6-c-spinner--AnimationDuration, 1.4s)
+    var(--pf-v6-c-spinner__path--AnimationTimingFunction, ease-in-out) infinite;
+}
+
+:host([size="xs"]) svg {
+  --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-xs--diameter,
+    var(--pf-t--global--icon--size--sm, 0.75rem));
+
+  & circle {
+    stroke-width: var(--pf-v6-c-spinner--StrokeWidth, 15);
+  }
+}
+
+:host([size="sm"]) svg {
+  --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-sm--diameter,
+    var(--pf-t--global--icon--size--md, 0.875rem));
+}
+
+:host([size="md"]) svg {
+  --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-md--diameter,
+    var(--pf-t--global--icon--size--lg, 1rem));
+}
+
+:host([size="lg"]) svg {
+  --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-lg--diameter,
+    var(--pf-t--global--icon--size--xl, 1.5rem));
+}
+
+:host([size="xl"]) svg {
+  --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-xl--diameter,
+    var(--pf-t--global--icon--size--2xl, 3.5rem));
+}
+
+:host([inline]) svg {
+  --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-inline--diameter, 1em);
+}
+
+@keyframes rotate {
+  0% {
+    rotate: 0deg;
+  }
+
+  100% {
+    rotate: 360deg;
+  }
+}
+
+@keyframes dash {
+  0% {
+    stroke-dashoffset: 280;
+    rotate: 0deg;
+  }
+
+  15% {
+    stroke-width: calc(var(--pf-v6-c-spinner__path--StrokeWidth,
+      var(--pf-v6-c-spinner--StrokeWidth, 10)) - 4);
+  }
+
+  40% {
+    stroke-dasharray: 220;
+    stroke-dashoffset: 150;
+  }
+
+  100% {
+    stroke-dashoffset: 280;
+    rotate: 720deg;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  svg,
+  circle {
+    animation-duration: 0s;
+  }
+}
diff --git a/elements/pf-v6-spinner/pf-v6-spinner.ts b/elements/pf-v6-spinner/pf-v6-spinner.ts
new file mode 100644
index 0000000000..3d77fc1a5c
--- /dev/null
+++ b/elements/pf-v6-spinner/pf-v6-spinner.ts
@@ -0,0 +1,73 @@
+import { LitElement, html, type TemplateResult } from 'lit';
+import { customElement } from 'lit/decorators/custom-element.js';
+import { property } from 'lit/decorators/property.js';
+
+import { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';
+
+import styles from './pf-v6-spinner.css';
+
+export type SpinnerSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+/**
+ * A **spinner** is an animated visual that indicates when a quick action is
+ * in progress. For actions that may take a long time, use a progress bar instead.
+ * @summary Indicates that an action is in progress.
+ * @cssprop {<length>} [--pf-v6-c-spinner--diameter] - Custom diameter of the spinner
+ * @cssprop {<color>} [--pf-v6-c-spinner--Color] - Color of the spinner stroke
+ * @cssprop {<time>} [--pf-v6-c-spinner--AnimationDuration=1.4s] - Duration of one animation cycle
+ * @cssprop {<number>} [--pf-v6-c-spinner--StrokeWidth=10] - Width of the spinner stroke
+ */
+@customElement('pf-v6-spinner')
+export class PfV6Spinner extends LitElement {
+  static readonly styles: CSSStyleSheet[] = [styles];
+
+  /** Preset sizes for the spinner */
+  @property({ reflect: true }) size?: SpinnerSize;
+
+  /**
+   * When true, the spinner inherits its font size from the surrounding text,
+   * allowing it to display inline with content.
+   */
+  @property({ type: Boolean, reflect: true }) inline = false;
+
+  /** Custom diameter of spinner set as CSS variable */
+  @property({ reflect: true }) diameter?: string;
+
+  /** Accessible label describing what is loading */
+  @property({ attribute: 'accessible-label' }) accessibleLabel?: string;
+
+  #internals = InternalsController.of(this, {
+    role: 'progressbar',
+    ariaValueText: 'Loading...',
+    ariaLabel: 'Loading...',
+  });
+
+  override willUpdate(changed: Map<PropertyKey, unknown>): void {
+    if (changed.has('accessibleLabel')) {
+      const label = this.accessibleLabel ?? 'Loading...';
+      this.#internals.ariaLabel = label;
+      this.#internals.ariaValueText = label;
+    }
+    if (changed.has('diameter')) {
+      if (this.diameter) {
+        this.style.setProperty('--pf-v6-c-spinner--diameter', this.diameter);
+      } else {
+        this.style.removeProperty('--pf-v6-c-spinner--diameter');
+      }
+    }
+  }
+
+  override render(): TemplateResult {
+    return html`
+      <svg viewBox="0 0 100 100" aria-hidden="true">
+        <circle cx="50" cy="50" r="45" fill="none" />
+      </svg>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'pf-v6-spinner': PfV6Spinner;
+  }
+}
diff --git a/elements/pf-v6-spinner/test/pf-v6-spinner.spec.ts b/elements/pf-v6-spinner/test/pf-v6-spinner.spec.ts
new file mode 100644
index 0000000000..e0bc75232b
--- /dev/null
+++ b/elements/pf-v6-spinner/test/pf-v6-spinner.spec.ts
@@ -0,0 +1,134 @@
+import { expect, html } from '@open-wc/testing';
+import { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js';
+import { a11ySnapshot } from '@patternfly/pfe-tools/test/a11y-snapshot.js';
+import { PfV6Spinner } from '@patternfly/elements/pf-v6-spinner/pf-v6-spinner.js';
+
+describe('<pf-v6-spinner>', function() {
+  it('imperatively instantiates', function() {
+    expect(document.createElement('pf-v6-spinner')).to.be.an.instanceof(PfV6Spinner);
+  });
+
+  it('should upgrade', async function() {
+    const element = await createFixture<PfV6Spinner>(html`<pf-v6-spinner>Loading...</pf-v6-spinner>`);
+    expect(element, 'pf-v6-spinner should be an instance of PfV6Spinner')
+        .to.be.an.instanceOf(customElements.get('pf-v6-spinner'))
+        .and
+        .to.be.an.instanceOf(PfV6Spinner);
+  });
+
+  describe('default state', function() {
+    let element: PfV6Spinner;
+    beforeEach(async function() {
+      element = await createFixture<PfV6Spinner>(html`<pf-v6-spinner>Loading...</pf-v6-spinner>`);
+    });
+
+    it('does not sprout a size attribute by default', function() {
+      expect(element.hasAttribute('size')).to.be.false;
+    });
+
+    it('renders at xl size by default', function() {
+      const { fontSize } = getComputedStyle(document.documentElement);
+      const expected = 3.5 * parseFloat(fontSize);
+      expect(element.offsetWidth).to.equal(expected);
+    });
+
+    it('defaults inline to false', function() {
+      expect(element.inline).to.equal(false);
+    });
+
+    it('is accessible', async function() {
+      await expect(element).to.be.accessible();
+    });
+
+    it('has progressbar role in a11y tree', async function() {
+      const snapshot = await a11ySnapshot();
+      const spinnerNode = snapshot.children?.find(
+        (child: { role: string }) => child.role === 'progressbar'
+      );
+      expect(spinnerNode).to.exist;
+      expect(spinnerNode?.name).to.equal('Loading...');
+      expect(spinnerNode?.valuetext).to.equal('Loading...');
+    });
+  });
+
+  describe('accessible-label attribute', function() {
+    let element: PfV6Spinner;
+    beforeEach(async function() {
+      element = await createFixture<PfV6Spinner>(html`
+        <pf-v6-spinner accessible-label="Loading results">Loading...</pf-v6-spinner>
+      `);
+    });
+
+    it('is accessible', async function() {
+      await expect(element).to.be.accessible();
+    });
+
+    it('reflects custom accessible label in a11y tree', async function() {
+      const snapshot = await a11ySnapshot();
+      const spinnerNode = snapshot.children?.find(
+        (child: { role: string }) => child.role === 'progressbar'
+      );
+      expect(spinnerNode).to.exist;
+      expect(spinnerNode?.name).to.equal('Loading results');
+      expect(spinnerNode?.valuetext).to.equal('Loading results');
+    });
+  });
+
+  describe('size attribute', function() {
+    let element: PfV6Spinner;
+
+    function convertRemToPixels(rem: `${number}rem`) {
+      const { fontSize } = getComputedStyle(document.documentElement);
+      return parseFloat(rem) * parseFloat(fontSize);
+    }
+
+    beforeEach(async function() {
+      element = await createFixture<PfV6Spinner>(html`
+        <pf-v6-spinner>Loading...</pf-v6-spinner>
+      `);
+    });
+
+    for (const [size, expected] of [
+      ['xs', '0.75rem'],
+      ['sm', '0.875rem'],
+      ['md', '1rem'],
+      ['lg', '1.5rem'],
+      ['xl', '3.5rem'],
+    ] as const) {
+      it(size, async function() {
+        element.size = size;
+        await element.updateComplete;
+        expect(element.offsetWidth).to.equal(convertRemToPixels(expected));
+      });
+    }
+  });
+
+  describe('diameter attribute', function() {
+    it('sets the element diameter', async function() {
+      const customDiameterValue = 80;
+      const element = await createFixture<PfV6Spinner>(html`
+        <pf-v6-spinner diameter="${customDiameterValue}px">Loading...</pf-v6-spinner>
+      `);
+      expect(element.offsetWidth).to.equal(customDiameterValue);
+    });
+  });
+
+  describe('inline attribute', function() {
+    let container: HTMLParagraphElement;
+    let element: PfV6Spinner;
+    beforeEach(async function() {
+      container = await createFixture<HTMLParagraphElement>(html`
+        <p style="font-size: 32px;">
+          Text
+          <pf-v6-spinner inline accessible-label="Inline spinner">Loading...</pf-v6-spinner>
+        </p>
+      `);
+      element = container.querySelector('pf-v6-spinner')!;
+      await element.updateComplete;
+    });
+
+    it('inherits font size from surrounding content', function() {
+      expect(element.offsetWidth).to.equal(32);
+    });
+  });
+});