aboutsummaryrefslogtreecommitdiffstats
path: root/packages
diff options
context:
space:
mode:
authorfragosti <francesco.agosti93@gmail.com>2018-07-25 10:03:52 +0800
committerfragosti <francesco.agosti93@gmail.com>2018-07-25 10:09:02 +0800
commit490fed622868d594f0e8ff790b2dda277c117a48 (patch)
treeb92a7213d45f118ce5193ba22c1751c23640e52e /packages
parent9c81692d48fed4942fe6482949d6eed3629d4037 (diff)
downloaddexon-sol-tools-490fed622868d594f0e8ff790b2dda277c117a48.tar
dexon-sol-tools-490fed622868d594f0e8ff790b2dda277c117a48.tar.gz
dexon-sol-tools-490fed622868d594f0e8ff790b2dda277c117a48.tar.bz2
dexon-sol-tools-490fed622868d594f0e8ff790b2dda277c117a48.tar.lz
dexon-sol-tools-490fed622868d594f0e8ff790b2dda277c117a48.tar.xz
dexon-sol-tools-490fed622868d594f0e8ff790b2dda277c117a48.tar.zst
dexon-sol-tools-490fed622868d594f0e8ff790b2dda277c117a48.zip
Make a non-jank Spinner component and use it
Diffstat (limited to 'packages')
-rw-r--r--packages/website/ts/components/ui/allowance_state_view.tsx9
-rw-r--r--packages/website/ts/components/ui/spinner.tsx54
-rw-r--r--packages/website/ts/style/keyframes.ts22
3 files changed, 83 insertions, 2 deletions
diff --git a/packages/website/ts/components/ui/allowance_state_view.tsx b/packages/website/ts/components/ui/allowance_state_view.tsx
index c9a96859c..4e7a4cdf2 100644
--- a/packages/website/ts/components/ui/allowance_state_view.tsx
+++ b/packages/website/ts/components/ui/allowance_state_view.tsx
@@ -1,5 +1,6 @@
-import CircularProgress from 'material-ui/CircularProgress';
import * as React from 'react';
+import { Container } from 'ts/components/ui/container';
+import { Spinner } from 'ts/components/ui/spinner';
export enum AllowanceState {
Locked,
@@ -18,7 +19,11 @@ export const AllowanceStateView: React.StatelessComponent<AllowanceStateViewProp
case AllowanceState.Unlocked:
return renderCheck();
case AllowanceState.Loading:
- return <CircularProgress size={16} thickness={2} />;
+ return (
+ <Container position="relative" top="3px" left="5px">
+ <Spinner size={18} strokeSize={2} />
+ </Container>
+ );
default:
return null;
}
diff --git a/packages/website/ts/components/ui/spinner.tsx b/packages/website/ts/components/ui/spinner.tsx
new file mode 100644
index 000000000..e8670cc3e
--- /dev/null
+++ b/packages/website/ts/components/ui/spinner.tsx
@@ -0,0 +1,54 @@
+import { colors } from '@0xproject/react-shared';
+import * as React from 'react';
+import { styled } from 'ts/style/theme';
+
+import { dash, rotate } from 'ts/style/keyframes';
+
+interface SpinnerSvgProps {
+ color: string;
+ size: number;
+ viewBox?: string;
+}
+
+const SpinnerSvg: React.StatelessComponent<SpinnerSvgProps> = props => <svg {...props} />;
+
+const StyledSpinner = styled(SpinnerSvg)`
+ animation: ${rotate} 3s linear infinite;
+ margin: ${props => `-${props.size / 2}px 0 0 -${props.size / 2}px`};
+ margin-top: ${props => `-${props.size / 2}px`};
+ margin-left: ${props => `-${props.size / 2}px`};
+ margin-bottom: 0px;
+ margin-right: 0px;
+ size: ${props => `${props.size}px`};
+ height: ${props => `${props.size}px`};
+
+ & .path {
+ stroke: ${props => props.color};
+ stroke-linecap: round;
+ animation: ${dash} 2.5s ease-in-out infinite;
+ }
+`;
+
+export interface SpinnerProps {
+ size?: number;
+ strokeSize?: number;
+ color?: string;
+}
+
+export const Spinner: React.StatelessComponent<SpinnerProps> = ({ size, strokeSize, color }) => {
+ const c = size / 2;
+ const r = c - strokeSize;
+ return (
+ <StyledSpinner color={color} size={size} viewBox={`0 0 ${size} ${size}`}>
+ <circle className="path" cx={c} cy={c} r={r} fill="none" strokeWidth={strokeSize} />
+ </StyledSpinner>
+ );
+};
+
+Spinner.defaultProps = {
+ size: 50,
+ color: colors.mediumBlue,
+ strokeSize: 4,
+};
+
+Spinner.displayName = 'Spinner';
diff --git a/packages/website/ts/style/keyframes.ts b/packages/website/ts/style/keyframes.ts
new file mode 100644
index 000000000..28ea50247
--- /dev/null
+++ b/packages/website/ts/style/keyframes.ts
@@ -0,0 +1,22 @@
+import { keyframes } from 'ts/style/theme';
+
+export const rotate = keyframes`
+ 100% {
+ transform: rotate(360deg);
+ }
+`;
+
+export const dash = keyframes`
+ 0% {
+ stroke-dasharray: 1, 150;
+ stroke-dashoffset: 0;
+ }
+ 50% {
+ stroke-dasharray: 90, 150;
+ stroke-dashoffset: -35;
+ }
+ 100% {
+ stroke-dasharray: 90, 150;
+ stroke-dashoffset: -124;
+ }
+`;