✨ Added loading animation

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) {