loader

resources/scss/_main.scss

@@ -1,3 +1,11 @@
+@keyframes sk-bounce {
+	0%, 100% {
+		transform: scale(0.0);
+	} 50% {
+		transform: scale(1.0);
+	}
+}
+
 section.tabs {
 	margin-bottom: 1rem;
 
@@ -134,12 +142,48 @@ section.tabs {
 					}
 				}
 			}
+section.loader {
+	position: fixed;
+	z-index: 1;
+	bottom: 25%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	pointer-events: none;
+
+	.spinner {
+		width: 50px;
+		height: 50px;
+
+		position: relative;
+		margin: 100px auto;
+
+		.double-bounce1,
+		.double-bounce2 {
+			width: 100%;
+			height: 100%;
+			border-radius: 50%;
+			background-color: #999;
+			opacity: 0.6;
+			position: absolute;
+			top: 0;
+			left: 0;
+			animation: sk-bounce 2.0s infinite ease-in-out;
+		}
+
+		.double-bounce2 {
+			animation-delay: -1.0s;
 		}
 	}
 }
 
 main {
 	flex: 1 1 auto;
+	opacity: 0;
+	transition: opacity 0.25s ease-in-out;
+
+	&.active {
+		opacity: 1;
+	}
 
 	.commands {
 		margin-bottom: 1rem;