diff options
author | Steve Klebanoff <steve.klebanoff@gmail.com> | 2018-10-23 04:11:29 +0800 |
---|---|---|
committer | Steve Klebanoff <steve.klebanoff@gmail.com> | 2018-10-23 04:11:29 +0800 |
commit | daf447361f911acf19a0f0489039244695945218 (patch) | |
tree | e923abe89f2778d9ebad1663043b0f3c0ba9f137 /packages/instant/src/components | |
parent | a766d78706cb45336263388360584390fe0e62f2 (diff) | |
download | dexon-0x-contracts-daf447361f911acf19a0f0489039244695945218.tar dexon-0x-contracts-daf447361f911acf19a0f0489039244695945218.tar.gz dexon-0x-contracts-daf447361f911acf19a0f0489039244695945218.tar.bz2 dexon-0x-contracts-daf447361f911acf19a0f0489039244695945218.tar.lz dexon-0x-contracts-daf447361f911acf19a0f0489039244695945218.tar.xz dexon-0x-contracts-daf447361f911acf19a0f0489039244695945218.tar.zst dexon-0x-contracts-daf447361f911acf19a0f0489039244695945218.zip |
WIP: spinner
Diffstat (limited to 'packages/instant/src/components')
-rw-r--r-- | packages/instant/src/components/animations/full_rotation.tsx | 15 | ||||
-rw-r--r-- | packages/instant/src/components/ui/spinner.tsx | 30 |
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> + ); +}; |