change picture loader

assets/css/src/generic.css

@@ -186,13 +186,22 @@
   opacity: 0;
 }
 
-img,
-picture svg.hide {
-  opacity: 0;
+.loader {
+  position: absolute;
+  width: 40px;
+  aspect-ratio: 1.154;
+  --_g: no-repeat radial-gradient(farthest-side, #fff 90%, #0000);
+  background: var(--_g) 50% 0, var(--_g) 0 100%, var(--_g) 100% 100%;
+  background-size: 35% calc(35% * 1.154);
+  animation: l16 1s infinite;
 }
-picture.hide {
-  background-color: transparent;
+@keyframes l16 {
+  50%,
+  100% {
+    background-position: 100% 100%, 50% 0, 0 100%;
+  }
 }
+
 img {
   transition: var(--transition-image-opacity);
 }

assets/css/src/vanilla.css

@@ -12,7 +12,7 @@ section:not(:last-child, .collapsable, .collapsable-sections) {
 }
 
 picture {
-  background-color: #ddd;
+  background-color: var(--color-season);
   display: flex !important;
   justify-content: center !important;
   align-items: center !important;

site/snippets/picture.php

@@ -26,6 +26,6 @@
             alt="<?= $alt?>"
             loading="lazy"
         >
-        <?= svg('assets/images/loader.svg') ?>
+        <div class="loader"></div>
     </picture>
 <?php endif ?>