From 770bfec42d21a9add2a40ef17e61eeac3b9beb6a Mon Sep 17 00:00:00 2001
From: FideleLesobre2022 <fidelelesobre@gmail.com>
Date: Sun, 19 May 2024 14:17:15 +0200
Subject: [PATCH] Adding third loader

---
 index.html |  8 ++++++++
 style.css  | 50 ++++++++++++++++++++++++++++++++++++++++++++++----
 2 files changed, 54 insertions(+), 4 deletions(-)

diff --git a/index.html b/index.html
index 6789607..a235e76 100644
--- a/index.html
+++ b/index.html
@@ -29,5 +29,13 @@
 
       Chargement . . .
     </section>
+
+    <section class="section-loading-bar">
+      <span class="loading-bar first"></span>
+      <span class="loading-bar second"></span>
+      <span class="loading-bar third"></span>
+      <span class="loading-bar fourth"></span>
+      Chargement . . .
+    </section>
   </body>
 </html>
diff --git a/style.css b/style.css
index 000281e..7238358 100644
--- a/style.css
+++ b/style.css
@@ -93,7 +93,7 @@ body
     width: 90px;
     position: relative;
     vertical-align: middle;
-    animation: spin 3s linear infinite;
+    animation: spin 10s linear infinite;
 }
 
 .loader-quart-4{
@@ -108,7 +108,7 @@ body
     border: #ffffff00 5px solid;
     display: inline-block;
     position: absolute;
-    animation: spin 3s linear infinite;
+    animation: spin 5s linear infinite;
 }
 
 .loader-quart-5
@@ -128,7 +128,7 @@ body
     border: #ffffff00 5px solid;
     display: inline-block;
     position: absolute;
-    animation: spin 3s linear infinite;
+    animation: spin 10s linear infinite;
 }
 
 .loader-quart-6
@@ -142,12 +142,54 @@ body
 }
 
 
+/* Loading bar */ 
+.section-loading-bar
+{
+    background-color: violet;
+}
 
+.loading-bar
+{
+    background-color: #fff;
+    height: 60px;
+    width: 20px;
+    display: inline-block;
+    vertical-align: middle;
+}
 
+.first
+{
+    animation: loading-bar 1s linear infinite;
+}
+.second
+{
+    animation: loading-bar 1s linear -.20s infinite;
+}
 
+.third
+{
+    animation: loading-bar 1s linear -.40s infinite;
+}
 
+.fourth
+{
+    animation: loading-bar 1s linear -.80s infinite;
+}
 
-
+@keyframes loading-bar {
+    0%{
+        transform: scale(0);
+        opacity: 0;
+    }
+    50%{
+        transform: scale(1);
+        opacity: 1;
+    }
+    100%{
+        transform: scale(0);
+        opacity: 0;
+    }
+}
 
 @keyframes spin{
     0%{