Implement small spinner

package.json

@@ -37,7 +37,8 @@
     "react-art": "^16.2.0",
     "react-dom": "^16.2.0",
     "react-native-web": "^0.6.0",
-    "react-scripts": "^1.1.1"
+    "react-scripts": "^1.1.1",
+    "svgs": "^3.2.1"
   },
   "devDependencies": {
     "@storybook/addon-actions": "^3.3.15",

src/component/spinner.js

@@ -0,0 +1,210 @@
+import React from 'react';
+import {
+  ActivityIndicator,
+  StyleSheet,
+  View,
+  ViewPropTypes,
+} from 'react-native';
+import PropTypes from 'prop-types';
+import { color, font } from './style';
+import Icon from './icon';
+import Text from './text';
+import Svg, { Path, Circle, Defs, Stop, LinearGradient } from './svg';
+
+//
+// Small Spinner
+//
+
+const smallStyles = StyleSheet.create({
+  spinner: {
+    transform: [{ scale: 1.0 }],
+  },
+});
+
+export const SmallSpinner = ({ ...props }) => (
+  <ActivityIndicator
+    size="small"
+    color={color.purple}
+    style={smallStyles.spinner}
+    {...props}
+  />
+);
+
+//
+// Load Network Spinner
+//
+
+const sizeM = 80;
+const progressWidthM = 3;
+
+const loadNetworkStyles = StyleSheet.create({
+  spinner: {
+    margin: 20,
+  },
+  bolt: {
+    height: 126 / 4.5,
+    width: 64 / 4.5,
+  },
+  copy: {
+    fontSize: font.sizeXS,
+    marginTop: 5,
+    color: color.white,
+    textAlign: 'center',
+  },
+});
+
+export const LoadNetworkSpinner = ({ percentage, msg }) => (
+  <View style={loadNetworkStyles.spinner}>
+    <ResizeableSpinner
+      percentage={percentage}
+      size={sizeM}
+      progressWidth={progressWidthM}
+      gradient="loadNetworkGrad"
+      icon="lightning-bolt"
+      iconStyles={loadNetworkStyles.bolt}
+    />
+    <Text style={loadNetworkStyles.copy}>{msg}</Text>
+  </View>
+);
+
+LoadNetworkSpinner.propTypes = {
+  percentage: PropTypes.number.isRequired,
+  msg: PropTypes.string.isRequired,
+};
+
+//
+// Resizeable Spinner
+//
+
+const resizeableStyles = StyleSheet.create({
+  iconWrapper: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    bottom: 0,
+    right: 0,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+
+const ResizeableSpinner = ({
+  percentage,
+  size,
+  gradient,
+  progressWidth,
+  icon,
+  iconStyles,
+}) => (
+  <View style={{ width: size, height: size }}>
+    <Svg width={size} height={size}>
+      <Gradients />
+      <SpinnerProgress
+        width={size}
+        percentage={percentage}
+        color={`url(#${gradient})`}
+      />
+      {
+        <SpinnerFill
+          spinnerWidth={size}
+          progressWidth={progressWidth}
+          color={color.blackDark}
+        />
+      }
+    </Svg>
+    <View style={resizeableStyles.iconWrapper}>
+      <Icon image={icon} style={iconStyles} />
+    </View>
+  </View>
+);
+
+ResizeableSpinner.propTypes = {
+  percentage: PropTypes.number.isRequired,
+  size: PropTypes.number.isRequired,
+  progressWidth: PropTypes.number.isRequired,
+  gradient: PropTypes.string.isRequired,
+  icon: PropTypes.string.isRequired,
+  iconStyles: ViewPropTypes.style,
+};
+
+//
+// Loading Network Gradient
+//
+
+const Gradients = () => (
+  <Defs>
+    <LinearGradient id="loadNetworkGrad" x1="0" y1="0" x2="1" y2="1">
+      <Stop offset="0%" stopColor={color.loadNetworkLightPurple} />
+      <Stop offset="50%" stopColor={color.loadNetworkMedPurple} />
+      <Stop offset="70%" stopColor={color.loadNetworkMedDarkPurple} />
+      <Stop offset="100%" stopColor={color.purple} />
+    </LinearGradient>
+    <LinearGradient id="openChannelsGrad" x1="0" y1="0" x2="1" y2="1">
+      <Stop offset="0%" stopColor={color.openChansLightPurple} />
+      <Stop offset="50%" stopColor={color.openChansDarkPurple} />
+    </LinearGradient>
+  </Defs>
+);
+
+//
+// Spinner Progress Path
+//
+
+const SpinnerProgress = ({ width, percentage, color }) => (
+  <Path
+    d={`M${width / 2} ${width / 2} L${width / 2} 0 ${generateArc(
+      percentage,
+      width / 2
+    )} Z`}
+    fill={color}
+  />
+);
+
+SpinnerProgress.propTypes = {
+  width: PropTypes.number.isRequired,
+  percentage: PropTypes.number.isRequired,
+  color: PropTypes.string.isRequired,
+};
+
+//
+// Spinner Fill
+//
+
+const SpinnerFill = ({ spinnerWidth, progressWidth, color }) => (
+  <Circle
+    cx={spinnerWidth / 2}
+    cy={spinnerWidth / 2}
+    r={spinnerWidth / 2 - progressWidth}
+    fill={color}
+  />
+);
+
+SpinnerFill.propTypes = {
+  spinnerWidth: PropTypes.number.isRequired,
+  progressWidth: PropTypes.number.isRequired,
+  color: PropTypes.string.isRequired,
+};
+
+const generateArc = (percentage, radius) => {
+  if (percentage === 0) {
+    percentage = 1;
+  } else if (percentage === 100) {
+    percentage = 99.999;
+  }
+  const a = percentage * 2 * Math.PI / 100; // angle (in radian) depends on percentage
+  const r = radius; // radius of the circle
+  var rx = r,
+    ry = r,
+    xAxisRotation = 0,
+    largeArcFlag = 1,
+    sweepFlag = 1,
+    x = r + r * Math.sin(a),
+    y = r - r * Math.cos(a);
+  if (percentage <= 50) {
+    largeArcFlag = 0;
+  } else {
+    largeArcFlag = 1;
+  }
+
+  return `A${rx} ${ry} ${xAxisRotation} ${largeArcFlag} ${sweepFlag} ${x} ${y}`;
+};

src/component/style.js

@@ -11,6 +11,11 @@ export const color = {
   greyLight: '#D7D4D4',
   purple: '#57038D',
   lightPurple: '#A540CD',
+  loadNetworkLightPurple: '#A95BDC',
+  loadNetworkMedPurple: '#651399',
+  loadNetworkMedDarkPurple: '#610F96',
+  openChansLightPurple: '#A540CD',
+  openChansDarkPurple: '#6B249C',
   orange: '#F66B1C',
   blackDark: '#252F4A',
   blackText: '#4A4A4A',

src/component/svg.js

@@ -0,0 +1,3 @@
+import Svg from 'svgs';
+export default Svg;
+export * from 'svgs';

stories/component/spinner.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import MainContent from '../../src/component/main-content';
+import { LoadNetworkSpinner, SmallSpinner } from '../../src/component/spinner';
+import { color } from '../../src/component/style';
+import Background from '../../src/component/background';
+
+storiesOf('Spinner', module)
+  .addDecorator(story => (
+    <MainContent style={{ justifyContent: 'center' }}>{story()}</MainContent>
+  ))
+  .add('SmallSpinner', () => <SmallSpinner />);
+
+storiesOf('Spinner', module)
+  .addDecorator(story => (
+    <Background color={color.blackDark}>{story()}</Background>
+  ))
+  .add('LoadNetworkSpinner', () => (
+    <MainContent style={{ alignItems: 'flex-start', flexDirection: 'row' }}>
+      <LoadNetworkSpinner percentage={30} msg="Loading network..." />
+      <LoadNetworkSpinner percentage={50} msg="Almost done..." />
+      <LoadNetworkSpinner percentage={100} msg="Just a few seconds..." />
+    </MainContent>
+  ));