aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorSteve Klebanoff <steve.klebanoff@gmail.com>2018-10-23 04:18:37 +0800
committerSteve Klebanoff <steve.klebanoff@gmail.com>2018-10-23 04:18:37 +0800
commitd52a04e725afce3c2d563bcc52bd3273002af318 (patch)
tree1f99a20c0787a7302001ad289f648d294b5c1b7d
parentdaf447361f911acf19a0f0489039244695945218 (diff)
downloaddexon-sol-tools-d52a04e725afce3c2d563bcc52bd3273002af318.tar
dexon-sol-tools-d52a04e725afce3c2d563bcc52bd3273002af318.tar.gz
dexon-sol-tools-d52a04e725afce3c2d563bcc52bd3273002af318.tar.bz2
dexon-sol-tools-d52a04e725afce3c2d563bcc52bd3273002af318.tar.lz
dexon-sol-tools-d52a04e725afce3c2d563bcc52bd3273002af318.tar.xz
dexon-sol-tools-d52a04e725afce3c2d563bcc52bd3273002af318.tar.zst
dexon-sol-tools-d52a04e725afce3c2d563bcc52bd3273002af318.zip
Spinner no longer wobbly
-rw-r--r--packages/instant/src/components/animations/full_rotation.tsx11
-rw-r--r--packages/instant/src/components/ui/spinner.tsx10
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"