auto-loading completely done

src/views/components/common/Spinner/Spinner.module.scss

@@ -0,0 +1,23 @@
+@import 'src/views/styles/base.module.scss';
+
+$spinner-border-width: 10px;
+
+.spinner {
+    border: 1px solid $CHARCOAL;
+    border-width: $spinner-border-width;
+    border-top: $spinner-border-width solid $TANGERINE;
+    margin: 0 auto 15px auto;
+    border-radius: 50%;
+    width: 60px;
+    height: 60px;
+    animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}

src/views/components/common/Spinner/Spinner.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { ISassColors } from 'src/views/styles/colors.module.scss';
+import styles from './Spinner.module.scss';
+
+type Props = {
+    color?: keyof ISassColors;
+};
+
+/**
+ * A simple spinner component that can be used to indicate loading.
+ */
+export default function Spinner({ color }: Props) {
+    return <div className={styles.spinner} />;
+}