diff --git a/packages/ui-extensions-react/src/surfaces/admin/components.ts b/packages/ui-extensions-react/src/surfaces/admin/components.ts
index a9a3e4885e..3f21e729f2 100644
--- a/packages/ui-extensions-react/src/surfaces/admin/components.ts
+++ b/packages/ui-extensions-react/src/surfaces/admin/components.ts
@@ -38,6 +38,8 @@ export {PasswordField} from './components/PasswordField/PasswordField';
export type {PasswordFieldProps} from './components/PasswordField/PasswordField';
export {Pressable} from './components/Pressable/Pressable';
export type {PressableProps} from './components/Pressable/Pressable';
+export {ProgressIndicator} from './components/ProgressIndicator/ProgressIndicator';
+export type {ProgressIndicatorProps} from './components/ProgressIndicator/ProgressIndicator';
export {ResourceItem} from './components/ResourceItem/ResourceItem';
export type {ResourceItemProps} from './components/ResourceItem/ResourceItem';
export {ResourceList} from './components/ResourceList/ResourceList';
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/ProgressIndicator/ProgressIndicator.ts b/packages/ui-extensions-react/src/surfaces/admin/components/ProgressIndicator/ProgressIndicator.ts
new file mode 100644
index 0000000000..655e9ab99d
--- /dev/null
+++ b/packages/ui-extensions-react/src/surfaces/admin/components/ProgressIndicator/ProgressIndicator.ts
@@ -0,0 +1,9 @@
+import {ProgressIndicator as BaseProgressIndicator} from '@shopify/ui-extensions/admin';
+import type {ProgressIndicatorProps} from '@shopify/ui-extensions/admin';
+import {createRemoteReactComponent} from '@remote-ui/react';
+
+export const ProgressIndicator = createRemoteReactComponent<
+ 'ProgressIndicator',
+ ProgressIndicatorProps
+>(BaseProgressIndicator);
+export type {ProgressIndicatorProps} from '@shopify/ui-extensions/admin';
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/ProgressIndicator/examples/basic-ProgressIndicator.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/ProgressIndicator/examples/basic-ProgressIndicator.example.tsx
new file mode 100644
index 0000000000..8b4968f5e9
--- /dev/null
+++ b/packages/ui-extensions-react/src/surfaces/admin/components/ProgressIndicator/examples/basic-ProgressIndicator.example.tsx
@@ -0,0 +1,12 @@
+import {
+ reactExtension,
+ ProgressIndicator,
+} from '@shopify/ui-extensions-react/admin';
+
+reactExtension('Playground', () => );
+
+function App() {
+ return (
+
+ );
+}
diff --git a/packages/ui-extensions/docs/surfaces/admin/screenshots/progressindicator-default.png b/packages/ui-extensions/docs/surfaces/admin/screenshots/progressindicator-default.png
new file mode 100644
index 0000000000..ce7052d8f2
Binary files /dev/null and b/packages/ui-extensions/docs/surfaces/admin/screenshots/progressindicator-default.png differ
diff --git a/packages/ui-extensions/docs/surfaces/admin/screenshots/progressindicator-thumbnail.png b/packages/ui-extensions/docs/surfaces/admin/screenshots/progressindicator-thumbnail.png
new file mode 100644
index 0000000000..302d208261
Binary files /dev/null and b/packages/ui-extensions/docs/surfaces/admin/screenshots/progressindicator-thumbnail.png differ
diff --git a/packages/ui-extensions/src/surfaces/admin/components.ts b/packages/ui-extensions/src/surfaces/admin/components.ts
index dc32dcb200..6f085e7c87 100644
--- a/packages/ui-extensions/src/surfaces/admin/components.ts
+++ b/packages/ui-extensions/src/surfaces/admin/components.ts
@@ -42,6 +42,8 @@ export {PasswordField} from './components/PasswordField/PasswordField';
export type {PasswordFieldProps} from './components/PasswordField/PasswordField';
export {Pressable} from './components/Pressable/Pressable';
export type {PressableProps} from './components/Pressable/Pressable';
+export {ProgressIndicator} from './components/ProgressIndicator/ProgressIndicator';
+export type {ProgressIndicatorProps} from './components/ProgressIndicator/ProgressIndicator';
export {ResourceItem} from './components/ResourceItem/ResourceItem';
export type {ResourceItemProps} from './components/ResourceItem/ResourceItem';
export {ResourceList} from './components/ResourceList/ResourceList';
diff --git a/packages/ui-extensions/src/surfaces/admin/components/ProgressIndicator/ProgressIndicator.doc.ts b/packages/ui-extensions/src/surfaces/admin/components/ProgressIndicator/ProgressIndicator.doc.ts
new file mode 100644
index 0000000000..84305047a6
--- /dev/null
+++ b/packages/ui-extensions/src/surfaces/admin/components/ProgressIndicator/ProgressIndicator.doc.ts
@@ -0,0 +1,48 @@
+import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
+
+const data: ReferenceEntityTemplateSchema = {
+ name: 'ProgressIndicator',
+ description:
+ 'Use this component to notify merchants that their action is being processed or loaded.',
+ requires: '',
+ thumbnail: 'progressindicator-thumbnail.png',
+ isVisualComponent: true,
+ type: '',
+ definitions: [
+ {
+ title: 'ProgressIndicatorProps',
+ description: '',
+ type: 'ProgressIndicatorProps',
+ },
+ ],
+ category: 'Components',
+ subCategory: 'Media',
+ defaultExample: {
+ image: 'progressindicator-default.png',
+ codeblock: {
+ title: 'Simple spinner example',
+ tabs: [
+ {
+ title: 'React',
+ code: '../../../../../../ui-extensions-react/src/surfaces/admin/components/ProgressIndicator/examples/basic-progressindicator.example.tsx',
+ language: 'tsx',
+ },
+ {
+ title: 'JS',
+ code: './examples/basic-progressindicator.example.ts',
+ language: 'js',
+ },
+ ],
+ },
+ },
+
+ related: [
+ {
+ type: 'component',
+ name: 'Button',
+ url: '/docs/api/admin-extensions/components/actions/button',
+ },
+ ],
+};
+
+export default data;
diff --git a/packages/ui-extensions/src/surfaces/admin/components/ProgressIndicator/ProgressIndicator.ts b/packages/ui-extensions/src/surfaces/admin/components/ProgressIndicator/ProgressIndicator.ts
new file mode 100644
index 0000000000..fd3b55636a
--- /dev/null
+++ b/packages/ui-extensions/src/surfaces/admin/components/ProgressIndicator/ProgressIndicator.ts
@@ -0,0 +1,32 @@
+import {createRemoteComponent} from '@remote-ui/core';
+import {GlobalProps, SizeScale, AccessibilityLabelProps} from '../shared';
+
+export interface ProgressIndicatorProps
+ extends GlobalProps,
+ AccessibilityLabelProps {
+ /**
+ * The size of the component.
+ */
+ size: SizeScale;
+
+ /**
+ * Set the color of the progress indicator.
+ *
+ * - `inherit` will take the color value from its parent,
+ * giving the progress indicator a monochrome appearance.
+ *
+ * @defaultValue 'inherit'
+ */
+ tone?: 'inherit' | 'default';
+
+ /**
+ * Style of the progress indicator
+ * @default 'spinner'
+ */
+ variant?: 'spinner';
+}
+
+export const ProgressIndicator = createRemoteComponent<
+ 'ProgressIndicator',
+ ProgressIndicatorProps
+>('ProgressIndicator');
diff --git a/packages/ui-extensions/src/surfaces/admin/components/ProgressIndicator/examples/basic-ProgressIndicator.ts b/packages/ui-extensions/src/surfaces/admin/components/ProgressIndicator/examples/basic-ProgressIndicator.ts
new file mode 100644
index 0000000000..1c5b343f39
--- /dev/null
+++ b/packages/ui-extensions/src/surfaces/admin/components/ProgressIndicator/examples/basic-ProgressIndicator.ts
@@ -0,0 +1,18 @@
+import {
+ extension,
+ ProgressIndicator,
+} from '@shopify/ui-extensions/admin';
+
+export default extension(
+ 'Playground',
+ (root) => {
+ const progressIndicator = root.createComponent(
+ ProgressIndicator,
+ {
+ size: 'small-200',
+ },
+ );
+
+ root.appendChild(progressIndicator);
+ },
+);
diff --git a/packages/ui-extensions/src/surfaces/admin/components/shared/index.ts b/packages/ui-extensions/src/surfaces/admin/components/shared/index.ts
index 9200e7c6aa..13021490e8 100644
--- a/packages/ui-extensions/src/surfaces/admin/components/shared/index.ts
+++ b/packages/ui-extensions/src/surfaces/admin/components/shared/index.ts
@@ -122,6 +122,15 @@ export interface MinMaxLengthProps {
minLength?: number;
}
+export interface AccessibilityLabelProps {
+ /**
+ * A label that describes the purpose or contents of the element. When set, it will be announced
+ * to users using assistive technologies and will provide them with more context. When set, any
+ * children or `label` supplied will not be announced to screen readers.
+ */
+ accessibilityLabel?: string;
+}
+
export interface AccessibilityRoleProps {
/**
* Sets the semantic meaning of the component’s content. When set,
@@ -636,6 +645,15 @@ export type SpaceScale =
| '28'
| '32';
+export type SizeScale =
+ | 'small-300'
+ | 'small-200'
+ | 'small-100'
+ | 'base'
+ | 'large-100'
+ | 'large-200'
+ | 'large-300';
+
export interface AnchorProps {
/**
* The URL to link to.