CSS modules for Loading

client/src/components/util/Loading/Loading.jsx

@@ -1,52 +1,11 @@
 import React from "react";
-import styled, { keyframes } from "styled-components";
 import styles from './Loading.module.css'
 
-const Wrapper = styled.div`
-  display: flex;
-  width: 100%;
-  height: 100%;
-  flex-flow: row nowrap;
-  justify-content: center;
-  align-items: center;
-`
-const frames = keyframes`
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-`
-const SpinnerBox = styled.div`
-  display: inline-block;
-  position: relative;
-  width: 128px;
-  height: 128px;
-`
-const Spinner0 = styled.div`
-  box-sizing: border-box;
-  display: block;
-  position: absolute;
-  width: 107px;
-  height: 107px;
-  margin: 10px;
-  border: 10px solid #ccc;
-  border-radius: 50%;
-  animation: ${frames} 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
-  border-color: #ccc transparent transparent transparent;
-`
-const Spinner1 = styled(Spinner0)`animation-delay: -0.45s;`
-const Spinner2 = styled(Spinner0)`animation-delay: -0.3s;`
-const Spinner3 = styled(Spinner0)`animation-delay: -0.15s;`
-
 export default () => (
-  <Wrapper>
-    <SpinnerBox>
-      <Spinner0/>
-      <Spinner1/>
-      <Spinner2/>
-      <Spinner3/>
-    </SpinnerBox>
-  </Wrapper>
+  <div className={styles.loading}>
+    <div/>
+    <div/>
+    <div/>
+    <div/>
+  </div>
 )

client/src/components/util/Loading/Loading.module.css

@@ -0,0 +1,44 @@
+/* Adapted from https://loading.io/css/ */
+
+.loading {
+  width: 100%;
+  height: 100%;
+  display: inline-block;
+  position: relative;
+  width: 128px;
+  height: 128px;
+}
+
+.loading div {
+  box-sizing: border-box;
+  display: block;
+  position: absolute;
+  width: 107px;
+  height: 107px;
+  margin: 10px;
+  border: 10px solid #ccc;
+  border-radius: 50%;
+  animation: loading 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+  border-color: #ccc transparent transparent transparent;
+}
+
+.loading div:nth-child(1) {
+  animation-delay: -0.45s;
+}
+
+.loading div:nth-child(2) {
+  animation-delay: -0.3s;
+}
+
+.loading div:nth-child(3) {
+  animation-delay: -0.15s;
+}
+
+@keyframes loading {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}