Make a non-jank Spinner component and use it

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;
+    }
+`;