added loader to imagelist

themes/spring.css

@@ -1,14 +1,22 @@
 @import url("https://fonts.googleapis.com/css2?family=Lora:wght@300;400;500;600;700&display=swap");
 
 * {
-  --color1: #FFB6C1; /* LightPink */
-  --color2: #98FB98; /* PaleGreen */
-  --color3: #FFD700; /* Gold */
-  --color4: #87CEFA; /* LightSkyBlue */
-  --bcolor1: #FFFFFF; /* White */
-  --bcolor2: #2F4F4F; /* DarkSlateGray */
-  --bcolor3: #FAF0E6; /* Linen */
-  --bcolor4: #E6E6FA; /* Lavender */
+  --color1: #FFB6C1;
+  /* LightPink */
+  --color2: #98FB98;
+  /* PaleGreen */
+  --color3: #FFD700;
+  /* Gold */
+  --color4: #87CEFA;
+  /* LightSkyBlue */
+  --bcolor1: #FFFFFF;
+  /* White */
+  --bcolor2: #2F4F4F;
+  /* DarkSlateGray */
+  --bcolor3: #FAF0E6;
+  /* Linen */
+  --bcolor4: #E6E6FA;
+  /* Lavender */
 }
 
 .navbar {
@@ -102,6 +110,54 @@
   font-family: "Lora", serif;
 }
 
+.loader,
+.loader:before,
+.loader:after {
+  border-radius: 50%;
+  width: 2.5em;
+  height: 2.5em;
+  animation-fill-mode: both;
+  animation: bblFadInOut 1.8s infinite ease-in-out;
+}
+
+.loader {
+  color: var(--bcolor2);
+  font-size: 7px;
+  position: relative;
+  text-indent: -9999em;
+  transform: translateZ(0);
+  animation-delay: -0.16s;
+}
+
+.loader:before,
+.loader:after {
+  content: '';
+  position: absolute;
+  top: 0;
+}
+
+.loader:before {
+  left: -3.5em;
+  animation-delay: -0.32s;
+}
+
+.loader:after {
+  left: 3.5em;
+}
+
+@keyframes bblFadInOut {
+
+  0%,
+  80%,
+  100% {
+    box-shadow: 0 2.5em 0 -1.3em
+  }
+
+  40% {
+    box-shadow: 0 2.5em 0 0
+  }
+}
+
 body {
   color: var(--bcolor2);
   background-color: var(--bcolor3);
@@ -109,4 +165,4 @@ body {
   font-optical-sizing: auto;
   font-weight: 400;
   font-style: normal;
-}
+}