aboutsummaryrefslogtreecommitdiffstats
path: root/packages
diff options
context:
space:
mode:
authorSteve Klebanoff <steve.klebanoff@gmail.com>2018-10-23 04:11:29 +0800
committerSteve Klebanoff <steve.klebanoff@gmail.com>2018-10-23 04:11:29 +0800
commitdaf447361f911acf19a0f0489039244695945218 (patch)
treee923abe89f2778d9ebad1663043b0f3c0ba9f137 /packages
parenta766d78706cb45336263388360584390fe0e62f2 (diff)
downloaddexon-sol-tools-daf447361f911acf19a0f0489039244695945218.tar
dexon-sol-tools-daf447361f911acf19a0f0489039244695945218.tar.gz
dexon-sol-tools-daf447361f911acf19a0f0489039244695945218.tar.bz2
dexon-sol-tools-daf447361f911acf19a0f0489039244695945218.tar.lz
dexon-sol-tools-daf447361f911acf19a0f0489039244695945218.tar.xz
dexon-sol-tools-daf447361f911acf19a0f0489039244695945218.tar.zst
dexon-sol-tools-daf447361f911acf19a0f0489039244695945218.zip
WIP: spinner
Diffstat (limited to 'packages')
-rw-r--r--packages/instant/src/components/animations/full_rotation.tsx15
-rw-r--r--packages/instant/src/components/ui/spinner.tsx30
2 files changed, 45 insertions, 0 deletions
diff --git a/packages/instant/src/components/animations/full_rotation.tsx b/packages/instant/src/components/animations/full_rotation.tsx
new file mode 100644
index 000000000..0b36fd21f
--- /dev/null
+++ b/packages/instant/src/components/animations/full_rotation.tsx
@@ -0,0 +1,15 @@
+import { keyframes, styled } from '../../style/theme';
+
+const rotatingKeyframes = keyframes`
+from {
+ transform: rotate(0deg);
+}
+
+to {
+ transform: rotate(360deg);
+}
+`;
+
+export const FullRotation = styled.div`
+ animation: ${rotatingKeyframes} 2s linear infinite;
+`;
diff --git a/packages/instant/src/components/ui/spinner.tsx b/packages/instant/src/components/ui/spinner.tsx
new file mode 100644
index 000000000..e5d2808f3
--- /dev/null
+++ b/packages/instant/src/components/ui/spinner.tsx
@@ -0,0 +1,30 @@
+import * as React from 'react';
+
+import { FullRotation } from '../animations/full_rotation';
+
+export interface SpinnerProps {
+ width: number;
+ height: number;
+}
+export const Spinner: React.StatelessComponent<SpinnerProps> = props => {
+ return (
+ <FullRotation>
+ <svg
+ width={props.width}
+ height={props.height}
+ viewBox="0 0 34 34"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <circle cx="17" cy="17" r="15" stroke="white" stroke-opacity="0.2" stroke-width="4" />
+ <path
+ d="M17 32C25.2843 32 32 25.2843 32 17C32 8.71573 25.2843 2 17 2"
+ stroke="white"
+ stroke-width="4"
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ />
+ </svg>
+ </FullRotation>
+ );
+};