diff --git a/src/@commonsku/styles/CircleSpinner.tsx b/src/@commonsku/styles/CircleSpinner.tsx
new file mode 100644
index 00000000..d7db3bc0
--- /dev/null
+++ b/src/@commonsku/styles/CircleSpinner.tsx
@@ -0,0 +1,61 @@
+import styled from 'styled-components'
+import React from 'react'
+
+import { SharedStyles, SharedStyleTypes } from './SharedStyles'
+
+const SpinningCircle = styled.div<{width?:number} & SharedStyleTypes>`
+ width: 100%;
+ height: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: ${props => props.width}px;
+ height: ${props=>props.width}px;
+ position: absolute;
+ animation: spin 1s linear infinite;
+ background: conic-gradient(from 180deg at 50% 50%, #00A0B6 0deg, rgba(40, 213, 238, 0) 360deg);
+ @keyframes spin {
+ 0% {
+ transform: rotate(0deg)
+ }
+ 100% {
+ transform: rotate(360deg)
+ }
+ }
+
+ border-radius: 100px;
+ ${SharedStyles}
+`
+
+const Wrapper = styled.div<{width?:number} & SharedStyleTypes>`
+ width: 100%;
+ height: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: ${props => props.width}px;
+ height: ${props=>props.width}px;
+ border-radius: 100px;
+ ${SharedStyles}
+`
+
+
+export const CircleSpinner = ( props : React.PropsWithChildren<{small?:boolean, width?: number, skubot?:boolean, color?:string, background?:string} & SharedStyleTypes>) => {
+ return
+
+
+
+}
+
diff --git a/src/@commonsku/styles/icons/index.ts b/src/@commonsku/styles/icons/index.ts
index f36f4b16..3da6a3d4 100644
--- a/src/@commonsku/styles/icons/index.ts
+++ b/src/@commonsku/styles/icons/index.ts
@@ -102,4 +102,5 @@ export { default as MagicEraserIcon} from './MagicEraserIcon';
export { default as TrendIcon} from './TrendIcon';
export { default as SlideInIcon} from './SlideInIcon';
+export { default as Spinner} from './Spinner';
diff --git a/src/App.tsx b/src/App.tsx
index d88e4168..17b940c3 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -89,7 +89,6 @@ import {
import { DemoCodeBlock } from 'demo/DemoCodeblock';
-
import * as demo from './demo/DemoStyles';
import NavAndPage from './demo/nav/NavAndPage';
import ColorsBlock from './demo/ColorsBlock';
@@ -100,6 +99,7 @@ import { MenuListProps } from 'react-select';
import { errors, green, navy, neutrals, pink, primary1, teal, white, yellow } from '@commonsku/styles/colors';
import { IconContainer, IconsShowcase } from '@commonsku/styles/IconShowcase';
import { Grid, GridItem } from '@commonsku/styles/Grid';
+import { CircleSpinner } from '@commonsku/styles/CircleSpinner';
const initialState = {
date: new Date(),
@@ -2756,6 +2756,10 @@ const App = () => {
]} name="IconDoc" /> {/* FileIcon.tsx */}
]} name="FolderIcon" />
+
+
+
+