diff options
| -rw-r--r-- | packages/instant/src/components/animations/full_rotation.tsx | 11 | ||||
| -rw-r--r-- | packages/instant/src/components/ui/spinner.tsx | 10 |
2 files changed, 15 insertions, 6 deletions
diff --git a/packages/instant/src/components/animations/full_rotation.tsx b/packages/instant/src/components/animations/full_rotation.tsx index 0b36fd21f..9adb565f9 100644 --- a/packages/instant/src/components/animations/full_rotation.tsx +++ b/packages/instant/src/components/animations/full_rotation.tsx @@ -1,5 +1,9 @@ import { keyframes, styled } from '../../style/theme'; +interface FullRotationProps { + height: string; + width: string; +} const rotatingKeyframes = keyframes` from { transform: rotate(0deg); @@ -10,6 +14,11 @@ to { } `; -export const FullRotation = styled.div` +export const FullRotation = + styled.div < + FullRotationProps > + ` animation: ${rotatingKeyframes} 2s linear infinite; + height: ${props => props.height}; + width: ${props => props.width}; `; diff --git a/packages/instant/src/components/ui/spinner.tsx b/packages/instant/src/components/ui/spinner.tsx index e5d2808f3..7abf24256 100644 --- a/packages/instant/src/components/ui/spinner.tsx +++ b/packages/instant/src/components/ui/spinner.tsx @@ -3,15 +3,15 @@ import * as React from 'react'; import { FullRotation } from '../animations/full_rotation'; export interface SpinnerProps { - width: number; - height: number; + pxWidth: number; + pxHeight: number; } export const Spinner: React.StatelessComponent<SpinnerProps> = props => { return ( - <FullRotation> + <FullRotation width={`${props.pxWidth}px`} height={`${props.pxHeight}px`}> <svg - width={props.width} - height={props.height} + width={props.pxWidth} + height={props.pxHeight} viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg" |