Add loading spinner

assets/main.css

@@ -1,3 +1,10 @@
+:root {
+	--primary-bg: white;
+	--secondary-bg: #F7F9FA;
+	--text: #4C555E;
+	--text-light: #1D262E;
+}
+
 body {
 	margin: 0;
 }
@@ -8,15 +15,17 @@ main {
 
 main .panel {
 	height: 100%;
+	width: 100%;
 	position: absolute;
+	display: flex;
 }
 
 menu.sidebar {
 	height: calc(100% - 50px);
 	position: relative;
 	margin: 0;
-	padding: 25px 10px;
-	background: #F7F9FA;
+	padding: 25px 0px;
+	background: var(--secondary-bg);
 	list-style: none;
 	font-size: 18px;
 	display: flex;
@@ -24,12 +33,17 @@ menu.sidebar {
 	gap: 20px;
 }
 
-menu.sidebar li {
-	color: #4C555E;
+menu.sidebar a {
+	color: var(--text);
 	display: flex;
 	align-items: center;
 	gap: 10px;
-	margin: 5px 0;
+	text-decoration: none;
+	padding: 10px 10px;
+}
+
+menu.sidebar a.active {
+	background: var(--primary-bg);
 }
 
 /* The user avatar */
@@ -40,8 +54,8 @@ menu.sidebar img {
 	border-radius: 50%;
 }
 
-menu.sidebar li:hover {
-	color: #1D262E;
+menu.sidebar a:hover {
+	color: var(--text-light);
 	cursor: pointer;
 }
 
@@ -49,3 +63,47 @@ menu.sidebar svg {
 	height: 24px;
 	width: 24px;
 }
+
+.spinner {
+	animation: rotate 2s linear infinite;
+	z-index: 2;
+	top: 50%;
+	left: 50%;
+	margin: -25px 0 0 -25px;
+	width: 50px;
+	height: 50px;
+}
+
+.spinner .path {
+	stroke: var(--text);
+    stroke-linecap: round;
+    animation: dash 1.5s ease-in-out infinite;
+}
+
+@keyframes rotate {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes dash {
+  0% {
+    stroke-dasharray: 1, 150;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -35;
+  }
+  100% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -124;
+  }
+}
+
+.page {
+	width: 100%;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}

components/app.vue

@@ -4,10 +4,10 @@
 <side-bar :role="user.status" :active="active">
 </side-bar>
 
-<div>{{active}}, {{hash}}</div>
-
-<div v-if="loading">
+<div v-if="loading" class="page">
+<spinner></spinner>
 </div>
+
 <div v-else-if="!loading"></div>
 
 </div>
@@ -15,6 +15,7 @@
 
 <script>
 import SideBar from "./sidebar.vue"
+import Spinner from "./spinner.vue"
 
 const user = {
  	firstName: "test",
@@ -40,7 +41,7 @@ function active() {
 }
 
 export default {
-	components: {SideBar},
+	components: {SideBar, Spinner},
 	computed: {active},
 	data() {
 		return {

components/spinner.vue

@@ -0,0 +1,6 @@
+<template>
+<svg class="spinner" viewBox="0 0 50 50">
+  <circle class="path" cx="25" cy="25" r="20" fill="none" stroke-width="5">
+  </circle>
+</svg>
+</template>