css load screen animation added

proj/y2t/assets/css/style.css

@@ -51,3 +51,48 @@ form section.input {
 section.input select, section.input input[type=text] {
   flex-grow: 1;
 }
+
+
+
+/* Loading screen */
+
+div.loading {
+    position: fixed;
+    background-color: var(--black);
+    color: var(--white);
+    width: 100vw;
+    height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 3rem;
+}
+
+div.loading span {
+    width: 2rem;
+    height: 2rem;
+    margin: 0 5px;
+    background-color: var(--white);
+    border-radius: 50%; 
+    display: inline-block;
+    animation-name: dots; 
+    animation-duration: 2s;
+    animation-iteration-count: infinite; 
+    animation-timing-function: ease-in-out;
+}
+
+div.loading span:nth-child(2){
+    animation-delay: 0.4s;
+} 
+
+div.loading span:nth-child(3){
+    animation-delay: 0.8s;
+} 
+
+@keyframes dots{
+    50%{
+        opacity: 0;
+        transform: scale(0.7) translate(10px);
+    }
+}
+