diff options
| -rw-r--r-- | packages/instant/src/components/animations/full_rotation.tsx | 15 | ||||
| -rw-r--r-- | packages/instant/src/components/ui/spinner.tsx | 30 |
2 files changed, 45 insertions, 0 deletions
diff --git a/packages/instant/src/components/animations/full_rotation.tsx b/packages/instant/src/components/animations/full_rotation.tsx new file mode 100644 index 000000000..0b36fd21f --- /dev/null +++ b/packages/instant/src/components/animations/full_rotation.tsx @@ -0,0 +1,15 @@ +import { keyframes, styled } from '../../style/theme'; + +const rotatingKeyframes = keyframes` +from { + transform: rotate(0deg); +} + +to { + transform: rotate(360deg); +} +`; + +export const FullRotation = styled.div` + animation: ${rotatingKeyframes} 2s linear infinite; +`; diff --git a/packages/instant/src/components/ui/spinner.tsx b/packages/instant/src/components/ui/spinner.tsx new file mode 100644 index 000000000..e5d2808f3 --- /dev/null +++ b/packages/instant/src/components/ui/spinner.tsx @@ -0,0 +1,30 @@ +import * as React from 'react'; + +import { FullRotation } from '../animations/full_rotation'; + +export interface SpinnerProps { + width: number; + height: number; +} +export const Spinner: React.StatelessComponent<SpinnerProps> = props => { + return ( + <FullRotation> + <svg + width={props.width} + height={props.height} + viewBox="0 0 34 34" + fill="none" + xmlns="http://www.w3.org/2000/svg" + > + <circle cx="17" cy="17" r="15" stroke="white" stroke-opacity="0.2" stroke-width="4" /> + <path + d="M17 32C25.2843 32 32 25.2843 32 17C32 8.71573 25.2843 2 17 2" + stroke="white" + stroke-width="4" + stroke-linecap="round" + stroke-linejoin="round" + /> + </svg> + </FullRotation> + ); +}; |