Adding UN loading bar

fidelelukeka · Jun 30, 2024 · edb00ed · edb00ed
1 parent 770bfec
commit edb00ed
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -37,5 +37,12 @@
       <span class="loading-bar fourth"></span>
       Chargement . . .
     </section>
+
+    <section class="UN">
+      <span class="UN-loadingBar-1 un-bar"></span>
+      <span class="UN-loadingBar-2 un-bar"></span>
+      <span class="UN-loadingBar-3 un-bar"></span>
+      <span class="UN-loadingBar-4 un-bar"></span>
+     </section>
   </body>
 </html>
diff --git a/style.css b/style.css
@@ -176,6 +176,71 @@ body
     animation: loading-bar 1s linear -.80s infinite;
 }
 
+
+
+/* 
+    UN page Inspira on LMS registration
+ */
+
+.UN{
+    position: relative;
+    height: 150px;
+    color: aqua;
+    background-color: #e1e1f3;
+}
+.un-bar{
+    height: 100px;
+    width: 100px;
+    display: inline-flex;
+    background-color: transparent;
+    border-radius: 50%;
+    vertical-align: middle;
+}
+
+.UN-loadingBar-1
+{
+    position: absolute;
+    top: 0;
+    bottom: 5px;
+    border: #070fecae solid 25px;
+    border-top-color:  #070fecae;
+    border-right-color:  #070fecae;
+    animation: spin 4s linear infinite;
+}
+.UN-loadingBar-2
+{
+    position: absolute;
+    top: 0;
+    bottom: 5px;
+    border: transparent solid 25px;
+    border-top-color:  #070fecae;
+    border-left-color:  #070fecae;
+    animation: spin 3s linear infinite;
+}
+.UN-loadingBar-3
+{
+    position: absolute;
+    top: 0;
+    bottom: 5px;
+    border: transparent solid 25px;
+    border-bottom-color:  #070fecae;
+    border-right-color:  #070fecae;
+    animation: spin 1s linear infinite;
+}
+.UN-loadingBar-4
+{
+    position: absolute;
+    top: 0;
+    bottom: 5px;
+    border: transparent solid 25px;
+    border-bottom-color:  #070fecae;
+    border-left-color:  #070fecae;
+    animation: spin 1s linear infinite;
+}
+
+
+
+
 @keyframes loading-bar {
     0%{
         transform: scale(0);