diff --git a/src/ui/components/mods/LoadingCircle.css b/src/ui/components/mods/LoadingCircle.css new file mode 100644 index 0000000..7c76c77 --- /dev/null +++ b/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); + } +} diff --git a/src/ui/components/mods/LoadingCircle.tsx b/src/ui/components/mods/LoadingCircle.tsx new file mode 100644 index 0000000..0a64a64 --- /dev/null +++ b/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 ( +
+
+
+ ) + } +} diff --git a/src/ui/components/mods/ModList.tsx b/src/ui/components/mods/ModList.tsx index 41ce62d..50c1f4e 100644 --- a/src/ui/components/mods/ModList.tsx +++ b/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 { } render() { - return
+ return ( +
+ +
+ ) } }