✨ Added loading animation

ProjetProgWeb/app.js

@@ -1,4 +1,3 @@
-
 let authorName = "";
 
 function requestToApi(author) {
@@ -9,6 +8,7 @@ function requestToApi(author) {
 }
 
 function displayResults(results) {
+    document.getElementsByClassName('loader')[0].style.display = "block"
     let count = 0
     results.forEach(function(elem) {
         let result = document.createElement('div')
@@ -26,4 +26,5 @@ function displayResults(results) {
     let nb = document.createElement("p")
     nb.innerHTML = `Nombre de résultats pour "${authorName}": ${count}.`
     document.getElementById('results-count').appendChild(nb)
+    document.getElementsByClassName('loader')[0].style.display = "none"
 }

ProjetProgWeb/index.php

@@ -20,6 +20,23 @@
                 }
             }
         ?>
+
+        <!-- La petite animation de chargement provient de :
+             https://freefrontend.com/css-spinners/
+             Réalisée par Jon Marron -->
+        <div class="loader">
+            <svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
+                <circle class="load one" cx="60" cy="60" r="40" />
+                <circle class="load two" cx="60" cy="60" r="40" />
+                <circle class="load three" cx="60" cy="60" r="40" />
+                <g>
+                    <circle class="point one" cx="45" cy="70" r="5" />
+                    <circle class="point two" cx="60" cy="70" r="5" />
+                    <circle class="point three" cx="75" cy="70" r="5" />
+                </g>
+            </svg>
+        </div>
+
         <div id="results-count"></div>
         <div id="results"></div>
     </body>

ProjetProgWeb/stylesheet.css

@@ -5,7 +5,8 @@
 }
 
 body {
-    display: block;
+    display: flex;
+    flex-direction: column;
     margin: 0;
     padding: 0;
     width: 100%;
@@ -73,6 +74,12 @@ body {
     overflow: scroll;
 }
 
+#results-count {
+    font-family: sans-serif;
+    margin: 15px;
+    opacity: 50%;
+}
+
 .result-element {
     box-shadow: rgba(0, 0, 0, 0.10) 2px 2px 8px;
     background-color: rgba(250, 250, 250, 0.5);
@@ -85,6 +92,74 @@ body {
     color: red;
 }
 
+.loader {
+    width: 150px;
+    height: 150px;
+    align-self: center;
+}
+
+.loader svg {
+    width: 90%;
+    fill: none;
+}
+
+.load {
+    transform-origin: 50% 50%;
+    stroke-dasharray: 570;
+    stroke-width: 20px;
+}
+.load.one {
+    stroke: #554d73;
+    animation: load 1.5s infinite;
+}
+.load.two {
+    stroke: #a496a4;
+    animation: load 1.5s infinite;
+    animation-delay: 0.1s;
+}
+.load.three {
+    stroke: #a5a7bb;
+    animation: load 1.5s infinite;
+    animation-delay: 0.2s;
+}
+
+.point {
+    animation: bounce 1s infinite ease-in-out;
+}
+.point.one {
+    fill: #a5a7bb;
+    animation-delay: 0s;
+}
+.point.two {
+    fill: #a496a4;
+    animation-delay: 0.1s;
+}
+.point.three {
+    fill: #554d73;
+    animation-delay: 0.2s;
+}
+
+@keyframes bounce {
+    0%, 100% {
+        transform: translateY(0);
+    }
+    50% {
+        transform: translateY(-20px);
+    }
+}
+@keyframes load {
+    0% {
+        stroke-dashoffset: 570;
+    }
+    50% {
+        stroke-dashoffset: 530;
+    }
+    100% {
+        stroke-dashoffset: 570;
+        transform: rotate(360deg);
+    }
+}
+
 /* Small  */
 @media (min-width: 576px) {