diff --git a/packages/react/.storybook/story-config.ts b/packages/react/.storybook/story-config.ts
index c34b0de5..4d282768 100644
--- a/packages/react/.storybook/story-config.ts
+++ b/packages/react/.storybook/story-config.ts
@@ -20,6 +20,7 @@
enum StorybookCategories {
DataDisplay = 'Data Display',
Foundations = 'Foundations',
+ Feedback = 'Feedback',
Icons = 'Icons',
Inputs = 'Inputs',
Layout = 'Layout',
@@ -37,6 +38,7 @@ export type Stories =
| 'Badge'
| 'Box'
| 'Button'
+ | 'CircularProgress'
| 'Card'
| 'CardActions'
| 'CardContent'
@@ -111,6 +113,9 @@ const StoryConfig: StorybookConfig = {
Button: {
hierarchy: `${StorybookCategories.Inputs}/Button`,
},
+ CircularProgress: {
+ hierarchy: `${StorybookCategories.Feedback}/Circular Progress`,
+ },
Card: {
hierarchy: `${StorybookCategories.Surfaces}/Card`,
},
diff --git a/packages/react/src/components/CircularProgress/CircularProgress.stories.mdx b/packages/react/src/components/CircularProgress/CircularProgress.stories.mdx
new file mode 100644
index 00000000..dbb18313
--- /dev/null
+++ b/packages/react/src/components/CircularProgress/CircularProgress.stories.mdx
@@ -0,0 +1,42 @@
+import {ArgsTable, Source, Story, Canvas, Meta} from '@storybook/addon-docs';
+import dedent from 'ts-dedent';
+import StoryConfig from '../../../.storybook/story-config.ts';
+import CircularProgress from './CircularProgress.tsx';
+
+export const meta = {
+ component: CircularProgress,
+ title: StoryConfig.CircularProgress.hierarchy,
+};
+
+
+
+export const Template = args => ;
+
+# Circular Progress
+
+- [Overview](#overview)
+- [Props](#props)
+- [Usage](#usage)
+
+## Overview
+
+Use CircularProgress as a spinner or progress indicator.
+
+
+
+## Props
+
+
+
+## Usage
+
+Import and use the `CircularProgress` component in your components as follows.
+
+
diff --git a/packages/react/src/components/CircularProgress/CircularProgress.tsx b/packages/react/src/components/CircularProgress/CircularProgress.tsx
new file mode 100644
index 00000000..7f4f5128
--- /dev/null
+++ b/packages/react/src/components/CircularProgress/CircularProgress.tsx
@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) 2023, WSO2 LLC. (https://www.wso2.com). All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import MuiCircularProgress, {CircularProgressProps as MuiCircularProgressProps} from '@mui/material/CircularProgress';
+import clsx from 'clsx';
+import {FC, ReactElement} from 'react';
+import {WithWrapperProps} from '../../models';
+import {composeComponentDisplayName} from '../../utils';
+import './circular-progress.scss';
+
+export type CircularProgressProps = MuiCircularProgressProps;
+
+const COMPONENT_NAME: string = 'CircularProgress';
+
+const CircularProgress: FC & WithWrapperProps = (props: CircularProgressProps): ReactElement => {
+ const {className, ...rest} = props;
+
+ const classes: string = clsx('oxygen-circular-progress', className);
+
+ return ;
+};
+
+CircularProgress.displayName = composeComponentDisplayName(COMPONENT_NAME);
+CircularProgress.muiName = COMPONENT_NAME;
+CircularProgress.defaultProps = {};
+
+export default CircularProgress;
diff --git a/packages/react/src/components/CircularProgress/__tests__/CircularProgress.test.tsx b/packages/react/src/components/CircularProgress/__tests__/CircularProgress.test.tsx
new file mode 100644
index 00000000..e395f8a2
--- /dev/null
+++ b/packages/react/src/components/CircularProgress/__tests__/CircularProgress.test.tsx
@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) 2023, WSO2 LLC. (https://www.wso2.com). All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import {render} from '@unit-testing';
+import CircularProgress from '../CircularProgress';
+
+describe('CircularProgress', () => {
+ it('should render successfully', () => {
+ const {baseElement} = render();
+ expect(baseElement).toBeTruthy();
+ });
+
+ it('should match the snapshot', () => {
+ const {baseElement} = render();
+ expect(baseElement).toMatchSnapshot();
+ });
+});
diff --git a/packages/react/src/components/CircularProgress/__tests__/__snapshots__/CircularProgress.test.tsx.snap b/packages/react/src/components/CircularProgress/__tests__/__snapshots__/CircularProgress.test.tsx.snap
new file mode 100644
index 00000000..c681e290
--- /dev/null
+++ b/packages/react/src/components/CircularProgress/__tests__/__snapshots__/CircularProgress.test.tsx.snap
@@ -0,0 +1,28 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CircularProgress should match the snapshot 1`] = `
+
+
+
+
+
+
+
+`;
diff --git a/packages/react/src/components/CircularProgress/circular-progress.scss b/packages/react/src/components/CircularProgress/circular-progress.scss
new file mode 100644
index 00000000..cb1326e1
--- /dev/null
+++ b/packages/react/src/components/CircularProgress/circular-progress.scss
@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) 2023, WSO2 LLC. (https://www.wso2.com). All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+.oxygen-circular-progress {
+ /* Add Styles */
+}
diff --git a/packages/react/src/components/CircularProgress/index.ts b/packages/react/src/components/CircularProgress/index.ts
new file mode 100644
index 00000000..1975b8e1
--- /dev/null
+++ b/packages/react/src/components/CircularProgress/index.ts
@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) 2023, WSO2 LLC. (https://www.wso2.com). All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+export {default} from './CircularProgress';
+export type {CircularProgressProps} from './CircularProgress';