loading anim

src/ui/components/mods/LoadingCircle.css

@@ -0,0 +1,39 @@
+/**
+ * Blatantly yoinked from https://loading.io/css/
+ */
+
+.LoadingCircle {
+  display: inline-block;
+  transform: translateZ(1px);
+
+  position: absolute;
+  top: 50%;
+  left: 50%;
+}
+
+.LoadingCircle > div {
+  display: inline-block;
+  width: 64px;
+  height: 64px;
+  margin: 8px;
+  border-radius: 50%;
+  background: #fff;
+  animation: loading 2.4s cubic-bezier(0, 0.2, 0.8, 1) infinite;
+}
+
+@keyframes loading {
+  0%,
+  100% {
+    animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5);
+  }
+  0% {
+    transform: rotateY(0deg);
+  }
+  50% {
+    transform: rotateY(1800deg);
+    animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1);
+  }
+  100% {
+    transform: rotateY(3600deg);
+  }
+}

src/ui/components/mods/LoadingCircle.tsx

@@ -0,0 +1,13 @@
+import React from 'react'
+
+import './LoadingCircle.css'
+
+export class LoadingCircle extends React.Component {
+  render() {
+    return (
+      <div className="LoadingCircle">
+        <div></div>
+      </div>
+    )
+  }
+}

src/ui/components/mods/ModList.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import { LoadingCircle } from './LoadingCircle'
 
 import './ModList.css'
 
@@ -16,6 +17,10 @@ export class ModList extends React.Component<IProps, IState> {
   }
 
   render() {
-    return <div className="ModList"></div>
+    return (
+      <div className="ModList">
+        <LoadingCircle />
+      </div>
+    )
   }
 }