/* https://css-loaders.com */

#loader {
  display: grid;
  min-height: 68px;
  place-items: center;
}
#loader .loader[data]:not([data=""]) ~ .img {
    display: none;
}

/* filling */
.loader[data="filling"] {
  width: fit-content;
  font-size: 40px;
  font-family: system-ui,sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  color: #0000;
  -webkit-text-stroke: 1px #000;
  --l:#0000 45%,#000 0 55%,#0000 0;
  --g:0/300% 100% no-repeat text;
  background: 
    linear-gradient(-60deg,var(--l)) var(--g),
    linear-gradient( 60deg,var(--l)) var(--g);
  animation: filling_l7 4s linear infinite;
}
.loader[data="filling"]:before {
  content: "Loading";
}
@keyframes filling_l7 {
  0%  {background-position: 100%,0   }
  50% {background-position: 0   ,0   }
  to  {background-position: 0   ,100%}
}

/* clones */
.loader[data="clones"] {
  width: 28px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #E3AAD6;
  transform-origin: top;
  display: grid;
  animation: clones_l3-0 1s infinite linear;
}
.loader[data="clones"]::before,
.loader[data="clones"]::after {
  content: "";
  grid-area: 1/1;
  background:#F4DD51;
  border-radius: 50%;
  transform-origin: top;
  animation: inherit;
  animation-name: clones_l3-1;
}
.loader[data="clones"]::after {
  background: #F10C49;
  --s:180deg;
}
@keyframes clones_l3-0 {
  0%,20% {transform: rotate(0)}
  100%   {transform: rotate(360deg)}
}
@keyframes clones_l3-1 {
  50% {transform: rotate(var(--s,90deg))}
  100% {transform: rotate(0)}
}

/* blob */
.loader[data="blob"] {
  width: 100px;
  aspect-ratio: 1;
  padding: 10px;
  box-sizing: border-box;
  display: grid;
  background: #fff;
  filter: blur(5px) contrast(10) hue-rotate(300deg);
  mix-blend-mode: darken;
}
.loader[data="blob"]:before,
.loader[data="blob"]:after{ 
  content: "";
  grid-area: 1/1; 
  width: 40px;
  height: 40px;
  background: #ffff00;
  animation: blob_l7 2s infinite;
}
.loader[data="blob"]:after{ 
  animation-delay: -1s;
}
@keyframes blob_l7{
  0%   {transform: translate(   0,0)}
  25%  {transform: translate(100%,0)}
  50%  {transform: translate(100%,100%)}
  75%  {transform: translate(   0,100%)}
  100% {transform: translate(   0,0)}
}