Added spinning bar which is displayed while the data is loading

bigbluebutton-html5/app/client/main.html

@@ -92,3 +92,16 @@
     {{> makeButton btn_class="slideButton signOutIcon" i_class="ion-log-out" label="Log out"}}
   </div>
 </template>
+
+<template name="loading">
+<div id="floatingCirclesG">
+  <div class="f_circleG" id="frotateG_01"></div>
+  <div class="f_circleG" id="frotateG_02"></div>
+  <div class="f_circleG" id="frotateG_03"></div>
+  <div class="f_circleG" id="frotateG_04"></div>
+  <div class="f_circleG" id="frotateG_05"></div>
+  <div class="f_circleG" id="frotateG_06"></div>
+  <div class="f_circleG" id="frotateG_07"></div>
+  <div class="f_circleG" id="frotateG_08"></div>
+</div>
+</template>

bigbluebutton-html5/app/client/stylesheets/style.less

@@ -850,3 +850,188 @@ body {
   .linear-gradient(rgb(65,68,77), rgb(58,60,69));
   width: 60vw;
 }
+
+/*********************************/
+/*Loading Spinning Bar's Styling */
+/*********************************/
+
+#floatingCirclesG{
+  top: calc(~'50% - 60px');
+  position:relative;
+  width:128px;
+  height:128px;
+  margin:auto;
+  transform:scale(0.6);
+    -o-transform:scale(0.6);
+    -ms-transform:scale(0.6);
+    -webkit-transform:scale(0.6);
+    -moz-transform:scale(0.6);
+}
+
+.f_circleG{
+  position:absolute;
+  background-color:rgb(238,238,238);
+  height:23px;
+  width:23px;
+  border-radius:12px;
+    -o-border-radius:12px;
+    -ms-border-radius:12px;
+    -webkit-border-radius:12px;
+    -moz-border-radius:12px;
+  animation-name:f_fadeG;
+    -o-animation-name:f_fadeG;
+    -ms-animation-name:f_fadeG;
+    -webkit-animation-name:f_fadeG;
+    -moz-animation-name:f_fadeG;
+  animation-duration:0.672s;
+    -o-animation-duration:0.672s;
+    -ms-animation-duration:0.672s;
+    -webkit-animation-duration:0.672s;
+    -moz-animation-duration:0.672s;
+  animation-iteration-count:infinite;
+    -o-animation-iteration-count:infinite;
+    -ms-animation-iteration-count:infinite;
+    -webkit-animation-iteration-count:infinite;
+    -moz-animation-iteration-count:infinite;
+  animation-direction:normal;
+    -o-animation-direction:normal;
+    -ms-animation-direction:normal;
+    -webkit-animation-direction:normal;
+    -moz-animation-direction:normal;
+}
+
+#frotateG_01{
+  left:0;
+  top:52px;
+  animation-delay:0.2495s;
+    -o-animation-delay:0.2495s;
+    -ms-animation-delay:0.2495s;
+    -webkit-animation-delay:0.2495s;
+    -moz-animation-delay:0.2495s;
+}
+
+#frotateG_02{
+  left:15px;
+  top:15px;
+  animation-delay:0.336s;
+    -o-animation-delay:0.336s;
+    -ms-animation-delay:0.336s;
+    -webkit-animation-delay:0.336s;
+    -moz-animation-delay:0.336s;
+}
+
+#frotateG_03{
+  left:52px;
+  top:0;
+  animation-delay:0.4225s;
+    -o-animation-delay:0.4225s;
+    -ms-animation-delay:0.4225s;
+    -webkit-animation-delay:0.4225s;
+    -moz-animation-delay:0.4225s;
+}
+
+#frotateG_04{
+  right:15px;
+  top:15px;
+  animation-delay:0.509s;
+    -o-animation-delay:0.509s;
+    -ms-animation-delay:0.509s;
+    -webkit-animation-delay:0.509s;
+    -moz-animation-delay:0.509s;
+}
+
+#frotateG_05{
+  right:0;
+  top:52px;
+  animation-delay:0.5955s;
+    -o-animation-delay:0.5955s;
+    -ms-animation-delay:0.5955s;
+    -webkit-animation-delay:0.5955s;
+    -moz-animation-delay:0.5955s;
+}
+
+#frotateG_06{
+  right:15px;
+  bottom:15px;
+  animation-delay:0.672s;
+    -o-animation-delay:0.672s;
+    -ms-animation-delay:0.672s;
+    -webkit-animation-delay:0.672s;
+    -moz-animation-delay:0.672s;
+}
+
+#frotateG_07{
+  left:52px;
+  bottom:0;
+  animation-delay:0.7585s;
+    -o-animation-delay:0.7585s;
+    -ms-animation-delay:0.7585s;
+    -webkit-animation-delay:0.7585s;
+    -moz-animation-delay:0.7585s;
+}
+
+#frotateG_08{
+  left:15px;
+  bottom:15px;
+  animation-delay:0.845s;
+    -o-animation-delay:0.845s;
+    -ms-animation-delay:0.845s;
+    -webkit-animation-delay:0.845s;
+    -moz-animation-delay:0.845s;
+}
+
+
+
+@keyframes f_fadeG{
+  0%{
+    background-color:rgb(0,0,0);
+  }
+
+  100%{
+    background-color:rgb(238,238,238);
+  }
+}
+
+@-o-keyframes f_fadeG{
+  0%{
+    background-color:rgb(0,0,0);
+  }
+
+  100%{
+    background-color:rgb(238,238,238);
+  }
+}
+
+@-ms-keyframes f_fadeG{
+  0%{
+    background-color:rgb(0,0,0);
+  }
+
+  100%{
+    background-color:rgb(238,238,238);
+  }
+}
+
+@-webkit-keyframes f_fadeG{
+  0%{
+    background-color:rgb(0,0,0);
+  }
+
+  100%{
+    background-color:rgb(238,238,238);
+  }
+}
+
+@-moz-keyframes f_fadeG{
+  0%{
+    background-color:rgb(0,0,0);
+  }
+
+  100%{
+    background-color:rgb(238,238,238);
+  }
+}
+
+/*********************************/
+/*End of Spinning Bar's Styling  */
+/*********************************/