aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-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"