diff options
author | Steve Klebanoff <steve.klebanoff@gmail.com> | 2018-10-23 04:18:37 +0800 |
---|---|---|
committer | Steve Klebanoff <steve.klebanoff@gmail.com> | 2018-10-23 04:18:37 +0800 |
commit | d52a04e725afce3c2d563bcc52bd3273002af318 (patch) | |
tree | 1f99a20c0787a7302001ad289f648d294b5c1b7d | |
parent | daf447361f911acf19a0f0489039244695945218 (diff) | |
download | dexon-0x-contracts-d52a04e725afce3c2d563bcc52bd3273002af318.tar dexon-0x-contracts-d52a04e725afce3c2d563bcc52bd3273002af318.tar.gz dexon-0x-contracts-d52a04e725afce3c2d563bcc52bd3273002af318.tar.bz2 dexon-0x-contracts-d52a04e725afce3c2d563bcc52bd3273002af318.tar.lz dexon-0x-contracts-d52a04e725afce3c2d563bcc52bd3273002af318.tar.xz dexon-0x-contracts-d52a04e725afce3c2d563bcc52bd3273002af318.tar.zst dexon-0x-contracts-d52a04e725afce3c2d563bcc52bd3273002af318.zip |
Spinner no longer wobbly
-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" |