From d52a04e725afce3c2d563bcc52bd3273002af318 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Mon, 22 Oct 2018 13:18:37 -0700 Subject: Spinner no longer wobbly --- packages/instant/src/components/animations/full_rotation.tsx | 11 ++++++++++- 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 = props => { return ( - +