@instructure/ui-spinner 11.7.7-snapshot-6 → 11.7.7-snapshot-8

package/CHANGELOG.md

@@ -3,12 +3,11 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [11.7.7-snapshot-6](https://github.com/instructure/instructure-ui/compare/v11.7.6...v11.7.7-snapshot-6) (2026-09-23)
-
-**Note:** Version bump only for package @instructure/ui-spinner
-
+## [11.7.7-snapshot-8](https://github.com/instructure/instructure-ui/compare/v11.7.6...v11.7.7-snapshot-8) (2026-09-23)
 
+### Features
 
+* **ui-spinner,ui-icons:** add ai and ai-on-color spinner variants ([cb3bd29](https://github.com/instructure/instructure-ui/commit/cb3bd2953f89f72a6d3a06c338a217eedce1a392))
 
 
 ## [11.7.6](https://github.com/instructure/instructure-ui/compare/v11.7.5...v11.7.6) (2026-09-14)

package/es/Spinner/v2/AISpinnerIcon.js

@@ -0,0 +1,44 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { wrapCustomIcon } from '@instructure/ui-icons';
+
+/**
+ * ---
+ * private: true
+ * ---
+ * The star path from packages/ui-icons/svg/Custom/igniteai-logo.svg, without
+ * the small sparkle. The star alone is centered in the viewBox, so it rotates
+ * evenly. If that logo changes, update this file too.
+ */
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+const AISpinnerPaths = ({
+  color = 'currentColor'
+}) => _jsx("path", {
+  d: "M11.0621 2.53451C11.3843 1.66389 12.6157 1.66389 12.9379 2.53451L15.0815 8.32767C15.1828 8.60139 15.3986 8.8172 15.6723 8.91848L21.4655 11.0621C22.3361 11.3843 22.3361 12.6157 21.4655 12.9379L15.6723 15.0815C15.3986 15.1828 15.1828 15.3986 15.0815 15.6723L12.9379 21.4655C12.6157 22.3361 11.3843 22.3361 11.0621 21.4655L8.91849 15.6723C8.8172 15.3986 8.60139 15.1828 8.32767 15.0815L2.53451 12.9379C1.66389 12.6157 1.66389 11.3843 2.53451 11.0621L8.32767 8.91849C8.60139 8.8172 8.8172 8.60139 8.91848 8.32767L11.0621 2.53451Z",
+  fill: color
+});
+const AISpinnerIcon = wrapCustomIcon(AISpinnerPaths, 'AISpinner', '0 0 24 24');
+export default AISpinnerIcon;
+export { AISpinnerIcon };

package/es/Spinner/v2/index.js

@@ -25,7 +25,9 @@
 import { useState, useEffect, forwardRef } from 'react';
 import { useStyleNew } from '@instructure/emotion';
 import { callRenderProp, omitProps, useDeterministicId } from '@instructure/ui-react-utils';
+import { ScreenReaderContent } from '@instructure/ui-a11y-content';
 import { logError as error } from '@instructure/console';
+import { AISpinnerIcon } from './AISpinnerIcon.js';
 import generateStyle from './styles.js';
 import { allowedProps } from './props.js';
 
@@ -34,7 +36,7 @@ import { allowedProps } from './props.js';
 category: components
 ---
 **/
-import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
 const Spinner = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     size = 'medium',
@@ -67,37 +69,57 @@ const Spinner = /*#__PURE__*/forwardRef((props, ref) => {
     }
     return undefined;
   }, [delay]);
+  const isAI = variant === 'ai' || variant === 'ai-on-color';
+  const renderCircle = () => _jsxs("svg", {
+    css: styles?.circle,
+    role: "img",
+    "aria-labelledby": titleId,
+    focusable: "false",
+    children: [_jsx("title", {
+      id: titleId,
+      children: callRenderProp(renderTitle)
+    }), _jsxs("g", {
+      role: "presentation",
+      children: [variant === 'default' && _jsx("circle", {
+        css: styles?.circleTrack,
+        cx: "50%",
+        cy: "50%",
+        r: styles?.radius
+      }), _jsx("circle", {
+        css: styles?.circleSpin,
+        cx: "50%",
+        cy: "50%",
+        r: styles?.radius
+      })]
+    })]
+  });
+
+  // The icon accepts only a string `title`, but `renderTitle` can be any node.
+  // So the label goes on the wrapping element instead.
+  const renderAIIcon = () => _jsxs(_Fragment, {
+    children: [_jsx(ScreenReaderContent, {
+      id: titleId,
+      children: callRenderProp(renderTitle)
+    }), _jsx("span", {
+      css: styles?.aiSpin,
+      children: _jsx(AISpinnerIcon, {
+        color: variant === 'ai' ? 'ai' : 'onColor'
+      })
+    })]
+  });
   const renderSpinner = () => {
     error(!!renderTitle, '[Spinner] The `renderTitle` prop is necessary for screen reader support.');
     const passthroughProps = omitProps(props, allowedProps);
     return _jsx("div", {
+      ...(isAI && {
+        role: 'img',
+        'aria-labelledby': titleId
+      }),
       ...passthroughProps,
       css: styles?.spinner,
       ref: ref,
       "data-cid": "Spinner",
-      children: _jsxs("svg", {
-        css: styles?.circle,
-        role: "img",
-        "aria-labelledby": titleId,
-        focusable: "false",
-        children: [_jsx("title", {
-          id: titleId,
-          children: callRenderProp(renderTitle)
-        }), _jsxs("g", {
-          role: "presentation",
-          children: [variant !== 'inverse' && _jsx("circle", {
-            css: styles?.circleTrack,
-            cx: "50%",
-            cy: "50%",
-            r: styles?.radius
-          }), _jsx("circle", {
-            css: styles?.circleSpin,
-            cx: "50%",
-            cy: "50%",
-            r: styles?.radius
-          })]
-        })]
-      })
+      children: isAI ? renderAIIcon() : renderCircle()
     });
   };
   return shouldRender ? renderSpinner() : null;

package/es/Spinner/v2/styles.js

@@ -134,14 +134,10 @@ const generateStyle = (componentTheme, params, sharedTokens) => {
       transformOrigin: `calc(${componentTheme.spinnerSizeLg} / 2) calc(${componentTheme.spinnerSizeLg} / 2)` //7em
     }
   };
-  const circleSpinVariant = {
-    default: {
-      stroke: componentTheme.color
-    },
-    inverse: {
-      stroke: componentTheme.inverseColor
-    }
-  };
+
+  // Only the circle variants use this. The AI variants render an icon instead,
+  // and take their color from the icon's own tokens.
+  const isInverse = variant === 'inverse';
   return {
     spinner: {
       label: 'spinner',
@@ -185,7 +181,25 @@ const generateStyle = (componentTheme, params, sharedTokens) => {
       animationTimingFunction: 'ease',
       strokeDasharray: `calc(${radii[size]} * 2 * 3.14159 * 0.75) 1000px`,
       ...circleSpinSizes[size],
-      ...circleSpinVariant[variant]
+      stroke: isInverse ? componentTheme.inverseColor : componentTheme.color
+    },
+    aiSpin: {
+      label: 'spinner__aiSpin',
+      display: 'block',
+      // The icon sits in an inline-block span. Without this, the line adds
+      // extra space below it, and the icon no longer rotates around its center.
+      lineHeight: 0,
+      ...circleSizes[size],
+      animationName: rotate,
+      animationDuration: '2.25s',
+      animationIterationCount: 'infinite',
+      animationTimingFunction: 'linear',
+      // The icon has no `size` prop, so its svg has no width or height. Use the
+      // same size as the circle, so the layout stays the same in every variant.
+      '& svg': {
+        display: 'block',
+        ...circleSizes[size]
+      }
     },
     radius: radii[size]
   };

package/lib/Spinner/v2/AISpinnerIcon.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.AISpinnerIcon = void 0;
+var _wrapCustomIcon = require("@instructure/ui-icons/lib/custom/wrapCustomIcon.js");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+/**
+ * ---
+ * private: true
+ * ---
+ * The star path from packages/ui-icons/svg/Custom/igniteai-logo.svg, without
+ * the small sparkle. The star alone is centered in the viewBox, so it rotates
+ * evenly. If that logo changes, update this file too.
+ */const AISpinnerPaths = ({
+  color = 'currentColor'
+}) => (0, _jsxRuntime.jsx)("path", {
+  d: "M11.0621 2.53451C11.3843 1.66389 12.6157 1.66389 12.9379 2.53451L15.0815 8.32767C15.1828 8.60139 15.3986 8.8172 15.6723 8.91848L21.4655 11.0621C22.3361 11.3843 22.3361 12.6157 21.4655 12.9379L15.6723 15.0815C15.3986 15.1828 15.1828 15.3986 15.0815 15.6723L12.9379 21.4655C12.6157 22.3361 11.3843 22.3361 11.0621 21.4655L8.91849 15.6723C8.8172 15.3986 8.60139 15.1828 8.32767 15.0815L2.53451 12.9379C1.66389 12.6157 1.66389 11.3843 2.53451 11.0621L8.32767 8.91849C8.60139 8.8172 8.8172 8.60139 8.91848 8.32767L11.0621 2.53451Z",
+  fill: color
+});
+const AISpinnerIcon = exports.AISpinnerIcon = (0, _wrapCustomIcon.wrapCustomIcon)(AISpinnerPaths, 'AISpinner', '0 0 24 24');
+var _default = exports.default = AISpinnerIcon;

package/lib/Spinner/v2/index.js

@@ -10,7 +10,9 @@ var _emotion = require("@instructure/emotion");
 var _callRenderProp = require("@instructure/ui-react-utils/lib/callRenderProp.js");
 var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
 var _useDeterministicId = require("@instructure/ui-react-utils/lib/DeterministicIdContext/useDeterministicId.js");
+var _ScreenReaderContent = require("@instructure/ui-a11y-content/lib/ScreenReaderContent");
 var _console = require("@instructure/console");
+var _AISpinnerIcon = require("./AISpinnerIcon.js");
 var _styles = _interopRequireDefault(require("./styles.js"));
 var _props = require("./props.js");
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
@@ -74,37 +76,57 @@ category: components
     }
     return undefined;
   }, [delay]);
+  const isAI = variant === 'ai' || variant === 'ai-on-color';
+  const renderCircle = () => (0, _jsxRuntime.jsxs)("svg", {
+    css: styles?.circle,
+    role: "img",
+    "aria-labelledby": titleId,
+    focusable: "false",
+    children: [(0, _jsxRuntime.jsx)("title", {
+      id: titleId,
+      children: (0, _callRenderProp.callRenderProp)(renderTitle)
+    }), (0, _jsxRuntime.jsxs)("g", {
+      role: "presentation",
+      children: [variant === 'default' && (0, _jsxRuntime.jsx)("circle", {
+        css: styles?.circleTrack,
+        cx: "50%",
+        cy: "50%",
+        r: styles?.radius
+      }), (0, _jsxRuntime.jsx)("circle", {
+        css: styles?.circleSpin,
+        cx: "50%",
+        cy: "50%",
+        r: styles?.radius
+      })]
+    })]
+  });
+
+  // The icon accepts only a string `title`, but `renderTitle` can be any node.
+  // So the label goes on the wrapping element instead.
+  const renderAIIcon = () => (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [(0, _jsxRuntime.jsx)(_ScreenReaderContent.ScreenReaderContent, {
+      id: titleId,
+      children: (0, _callRenderProp.callRenderProp)(renderTitle)
+    }), (0, _jsxRuntime.jsx)("span", {
+      css: styles?.aiSpin,
+      children: (0, _jsxRuntime.jsx)(_AISpinnerIcon.AISpinnerIcon, {
+        color: variant === 'ai' ? 'ai' : 'onColor'
+      })
+    })]
+  });
   const renderSpinner = () => {
     (0, _console.logError)(!!renderTitle, '[Spinner] The `renderTitle` prop is necessary for screen reader support.');
     const passthroughProps = (0, _omitProps.omitProps)(props, _props.allowedProps);
     return (0, _jsxRuntime.jsx)("div", {
+      ...(isAI && {
+        role: 'img',
+        'aria-labelledby': titleId
+      }),
       ...passthroughProps,
       css: styles?.spinner,
       ref: ref,
       "data-cid": "Spinner",
-      children: (0, _jsxRuntime.jsxs)("svg", {
-        css: styles?.circle,
-        role: "img",
-        "aria-labelledby": titleId,
-        focusable: "false",
-        children: [(0, _jsxRuntime.jsx)("title", {
-          id: titleId,
-          children: (0, _callRenderProp.callRenderProp)(renderTitle)
-        }), (0, _jsxRuntime.jsxs)("g", {
-          role: "presentation",
-          children: [variant !== 'inverse' && (0, _jsxRuntime.jsx)("circle", {
-            css: styles?.circleTrack,
-            cx: "50%",
-            cy: "50%",
-            r: styles?.radius
-          }), (0, _jsxRuntime.jsx)("circle", {
-            css: styles?.circleSpin,
-            cx: "50%",
-            cy: "50%",
-            r: styles?.radius
-          })]
-        })]
-      })
+      children: isAI ? renderAIIcon() : renderCircle()
     });
   };
   return shouldRender ? renderSpinner() : null;

package/lib/Spinner/v2/styles.js

@@ -140,14 +140,10 @@ const generateStyle = (componentTheme, params, sharedTokens) => {
       transformOrigin: `calc(${componentTheme.spinnerSizeLg} / 2) calc(${componentTheme.spinnerSizeLg} / 2)` //7em
     }
   };
-  const circleSpinVariant = {
-    default: {
-      stroke: componentTheme.color
-    },
-    inverse: {
-      stroke: componentTheme.inverseColor
-    }
-  };
+
+  // Only the circle variants use this. The AI variants render an icon instead,
+  // and take their color from the icon's own tokens.
+  const isInverse = variant === 'inverse';
   return {
     spinner: {
       label: 'spinner',
@@ -191,7 +187,25 @@ const generateStyle = (componentTheme, params, sharedTokens) => {
       animationTimingFunction: 'ease',
       strokeDasharray: `calc(${radii[size]} * 2 * 3.14159 * 0.75) 1000px`,
       ...circleSpinSizes[size],
-      ...circleSpinVariant[variant]
+      stroke: isInverse ? componentTheme.inverseColor : componentTheme.color
+    },
+    aiSpin: {
+      label: 'spinner__aiSpin',
+      display: 'block',
+      // The icon sits in an inline-block span. Without this, the line adds
+      // extra space below it, and the icon no longer rotates around its center.
+      lineHeight: 0,
+      ...circleSizes[size],
+      animationName: rotate,
+      animationDuration: '2.25s',
+      animationIterationCount: 'infinite',
+      animationTimingFunction: 'linear',
+      // The icon has no `size` prop, so its svg has no width or height. Use the
+      // same size as the circle, so the layout stays the same in every variant.
+      '& svg': {
+        display: 'block',
+        ...circleSizes[size]
+      }
     },
     radius: radii[size]
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-spinner",
-  "version": "11.7.7-snapshot-6",
+  "version": "11.7.7-snapshot-8",
   "description": "A spinner/loading component",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -15,20 +15,22 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.29.7",
-    "@instructure/emotion": "11.7.7-snapshot-6",
-    "@instructure/console": "11.7.7-snapshot-6",
-    "@instructure/ui-color-utils": "11.7.7-snapshot-6",
-    "@instructure/shared-types": "11.7.7-snapshot-6",
-    "@instructure/ui-react-utils": "11.7.7-snapshot-6",
-    "@instructure/ui-utils": "11.7.7-snapshot-6",
-    "@instructure/ui-themes": "11.7.7-snapshot-6",
-    "@instructure/uid": "11.7.7-snapshot-6",
-    "@instructure/ui-view": "11.7.7-snapshot-6"
+    "@instructure/console": "11.7.7-snapshot-8",
+    "@instructure/emotion": "11.7.7-snapshot-8",
+    "@instructure/ui-a11y-content": "11.7.7-snapshot-8",
+    "@instructure/shared-types": "11.7.7-snapshot-8",
+    "@instructure/ui-color-utils": "11.7.7-snapshot-8",
+    "@instructure/ui-icons": "11.7.7-snapshot-8",
+    "@instructure/ui-react-utils": "11.7.7-snapshot-8",
+    "@instructure/ui-themes": "11.7.7-snapshot-8",
+    "@instructure/ui-view": "11.7.7-snapshot-8",
+    "@instructure/uid": "11.7.7-snapshot-8",
+    "@instructure/ui-utils": "11.7.7-snapshot-8"
   },
   "devDependencies": {
     "vitest": "^5.0.0",
-    "@instructure/ui-babel-preset": "11.7.7-snapshot-6",
-    "@instructure/ui-axe-check": "11.7.7-snapshot-6"
+    "@instructure/ui-axe-check": "11.7.7-snapshot-8",
+    "@instructure/ui-babel-preset": "11.7.7-snapshot-8"
   },
   "peerDependencies": {
     "react": ">=18 <=19"

package/src/Spinner/v2/AISpinnerIcon.tsx

@@ -0,0 +1,45 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { wrapCustomIcon } from '@instructure/ui-icons'
+
+/**
+ * ---
+ * private: true
+ * ---
+ * The star path from packages/ui-icons/svg/Custom/igniteai-logo.svg, without
+ * the small sparkle. The star alone is centered in the viewBox, so it rotates
+ * evenly. If that logo changes, update this file too.
+ */
+const AISpinnerPaths = ({ color = 'currentColor' }: { color?: string }) => (
+  <path
+    d="M11.0621 2.53451C11.3843 1.66389 12.6157 1.66389 12.9379 2.53451L15.0815 8.32767C15.1828 8.60139 15.3986 8.8172 15.6723 8.91848L21.4655 11.0621C22.3361 11.3843 22.3361 12.6157 21.4655 12.9379L15.6723 15.0815C15.3986 15.1828 15.1828 15.3986 15.0815 15.6723L12.9379 21.4655C12.6157 22.3361 11.3843 22.3361 11.0621 21.4655L8.91849 15.6723C8.8172 15.3986 8.60139 15.1828 8.32767 15.0815L2.53451 12.9379C1.66389 12.6157 1.66389 11.3843 2.53451 11.0621L8.32767 8.91849C8.60139 8.8172 8.8172 8.60139 8.91848 8.32767L11.0621 2.53451Z"
+    fill={color}
+  />
+)
+
+const AISpinnerIcon = wrapCustomIcon(AISpinnerPaths, 'AISpinner', '0 0 24 24')
+
+export default AISpinnerIcon
+export { AISpinnerIcon }

package/src/Spinner/v2/README.md

@@ -28,7 +28,7 @@ dark backgrounds.
 ---
 type: example
 ---
-<View background="primary-inverse" as="div" >
+<View background="info" as="div" >
   <Spinner renderTitle="Loading" variant="inverse"  />
 </View>
 ```
@@ -61,3 +61,23 @@ type: example
   <Spinner renderTitle={() => "Hello world"} />
 </div>
 ```
+
+### AI variants
+
+Use the `ai` variants to show that an AI feature is working. Use `ai-on-color`
+on colored backgrounds.
+
+```js
+---
+type: example
+---
+<div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
+  <Spinner renderTitle="Loading" variant="ai" size="x-small" />
+  <Spinner renderTitle="Loading" variant="ai" size="small" />
+  <Spinner renderTitle="Loading" variant="ai" />
+  <Spinner renderTitle="Loading" variant="ai" size="large" />
+  <View background="info" as="div" padding="small">
+    <Spinner renderTitle="Loading" variant="ai-on-color" />
+  </View>
+</div>
+```

package/src/Spinner/v2/index.tsx

@@ -30,8 +30,10 @@ import {
   omitProps,
   useDeterministicId
 } from '@instructure/ui-react-utils'
+import { ScreenReaderContent } from '@instructure/ui-a11y-content'
 import { logError as error } from '@instructure/console'
 
+import { AISpinnerIcon } from './AISpinnerIcon.js'
 import generateStyle from './styles.js'
 import type { SpinnerProps } from './props'
 import { allowedProps } from './props.js'
@@ -78,6 +80,48 @@ const Spinner = forwardRef<HTMLDivElement, SpinnerProps>((props, ref) => {
     return undefined
   }, [delay])
 
+  const isAI = variant === 'ai' || variant === 'ai-on-color'
+
+  const renderCircle = () => (
+    <svg
+      css={styles?.circle}
+      role="img"
+      aria-labelledby={titleId}
+      focusable="false"
+    >
+      <title id={titleId}>{callRenderProp(renderTitle)}</title>
+      <g role="presentation">
+        {variant === 'default' && (
+          <circle
+            css={styles?.circleTrack}
+            cx="50%"
+            cy="50%"
+            r={styles?.radius as string}
+          />
+        )}
+        <circle
+          css={styles?.circleSpin}
+          cx="50%"
+          cy="50%"
+          r={styles?.radius as string}
+        />
+      </g>
+    </svg>
+  )
+
+  // The icon accepts only a string `title`, but `renderTitle` can be any node.
+  // So the label goes on the wrapping element instead.
+  const renderAIIcon = () => (
+    <>
+      <ScreenReaderContent id={titleId}>
+        {callRenderProp(renderTitle)}
+      </ScreenReaderContent>
+      <span css={styles?.aiSpin}>
+        <AISpinnerIcon color={variant === 'ai' ? 'ai' : 'onColor'} />
+      </span>
+    </>
+  )
+
   const renderSpinner = () => {
     error(
       !!renderTitle,
@@ -88,35 +132,13 @@ const Spinner = forwardRef<HTMLDivElement, SpinnerProps>((props, ref) => {
 
     return (
       <div
+        {...(isAI && { role: 'img', 'aria-labelledby': titleId })}
         {...passthroughProps}
         css={styles?.spinner}
         ref={ref}
         data-cid="Spinner"
       >
-        <svg
-          css={styles?.circle}
-          role="img"
-          aria-labelledby={titleId}
-          focusable="false"
-        >
-          <title id={titleId}>{callRenderProp(renderTitle)}</title>
-          <g role="presentation">
-            {variant !== 'inverse' && (
-              <circle
-                css={styles?.circleTrack}
-                cx="50%"
-                cy="50%"
-                r={styles?.radius as string}
-              />
-            )}
-            <circle
-              css={styles?.circleSpin}
-              cx="50%"
-              cy="50%"
-              r={styles?.radius as string}
-            />
-          </g>
-        </svg>
+        {isAI ? renderAIIcon() : renderCircle()}
       </div>
     )
   }

package/src/Spinner/v2/props.ts

@@ -52,9 +52,11 @@ type SpinnerOwnProps = {
    */
   size?: 'x-small' | 'small' | 'medium' | 'large'
   /**
-   * Different color schemes for use with light or dark backgrounds
+   * Different color schemes for use with light or dark backgrounds.
+   * The `ai` variants show the AI icon instead of the circle. `ai` uses the
+   * theme's AI gradient, and `ai-on-color` is for colored backgrounds.
    */
-  variant?: 'default' | 'inverse'
+  variant?: 'default' | 'inverse' | 'ai' | 'ai-on-color'
 }
 
 type PropKeys = keyof SpinnerOwnProps
@@ -67,7 +69,7 @@ type SpinnerProps = SpinnerOwnProps &
   WithDeterministicIdProps
 
 type SpinnerStyle = ComponentStyle<
-  'spinner' | 'circle' | 'circleTrack' | 'circleSpin' | 'radius'
+  'spinner' | 'circle' | 'circleTrack' | 'circleSpin' | 'radius' | 'aiSpin'
 >
 
 const allowedProps: AllowedPropKeys = [