Added html for loading screen

resources/chat/loading.html

+<div class="loading-container">
+    <div class="inner-container">
+        <div class="loading-spinner">
+            <div></div><div></div>
+        </div>
+        <div>Loading Messages</div>
+    </div>
+</div>
+

resources/chat/loading.style

+.loading-container {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    background-color: rgb(225, 225, 225);
+    z-index: 1;
+    opacity: .7;
+    color: #0066cc;
+    margin: 0 auto;
+    text-align: center;
+}
+
+.inner-container {
+    margin: auto;
+    font-size: 20px;
+    font-weight: 500;
+    top: 50%;
+    transform: translateY(-50%);
+    -webkit-transform: translateY(-50%);
+    position: absolute;
+    left: 0;
+    right: 0;
+}
+
+#loading.hidden {
+    visibility: hidden;
+}
+
+.loading-spinner {
+    display: inline-block;
+    position: relative;
+    width: 80px;
+    height: 80px;
+}
+
+.loading-spinner div {
+    position: absolute;
+    border: 4px solid #0066cc;
+    opacity: 1;
+    border-radius: 50%;
+    animation: loading-spinner 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
+}
+
+.loading-spinner div:nth-child(2) {
+    animation-delay: -0.5s;
+}
+
+@keyframes loading-spinner {
+    0% {
+        top: 36px;
+        left: 36px;
+        width: 0;
+        height: 0;
+        opacity: 0;
+    }
+    4.9% {
+        top: 36px;
+        left: 36px;
+        width: 0;
+        height: 0;
+        opacity: 0;
+    }
+    5% {
+        top: 36px;
+        left: 36px;
+        width: 0;
+        height: 0;
+        opacity: 1;
+    }
+    100% {
+        top: 0px;
+        left: 0px;
+        width: 72px;
+        height: 72px;
+        opacity: 0;
+    }
+}