Changed loading logic for retrieving more channels to allow for loading animation to be inserted into the More... menu that allows you to join more channels while waiting for the list of channels to load

1 files changed, 57 insertions, 0 deletions

diff --git a/web/sass-files/sass/partials/_loading.scss b/web/sass-files/sass/partials/_loading.scss
index 185a42180..a078d3563 100644
--- a/web/sass-files/sass/partials/_loading.scss
+++ b/web/sass-files/sass/partials/_loading.scss
@@ -66,3 +66,60 @@
 		}
 	}
 }
+
+.channel-loading-screen {
+	position: absolute;
+	text-align: center;
+	padding: 2em 1em;
+}
+
+.channel-loading-message {
+	.loading__content {
+		.round {
+			background-color: #444;
+			width: 4px;
+			height: 4px;
+			display: inline-block;
+			margin: 0 1px;
+			opacity: 0.1;
+			@include border-radius(10px);
+			-moz-animation: move 0.75s infinite linear;
+			-webkit-animation: move 0.75s infinite linear;
+		}
+
+		#round_1 {
+			-moz-animation-delay: .2s;
+			-webkit-animation-delay: .2s;
+		}
+
+		#round_2 {
+			-moz-animation-delay: .4s;
+			-webkit-animation-delay: .4s;
+		}
+
+		#round_3 {
+			-moz-animation-delay: .6s;
+			-webkit-animation-delay: .6s;
+		}
+
+		@-moz-keyframes move {
+			0% {
+				opacity: 1;
+			}
+
+			100% {
+				opacity: 0.1;
+			};
+		}
+
+		@-webkit-keyframes move {
+			0% {
+				opacity: 1;
+			}
+
+			100% {
+				opacity: 0.1;
+			};
+		}
+	}
+}