galaxy/loaders/Nawsome_fluffy-seahorse-28.html

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128" height="128px" width="128px" class="pl">
	<circle stroke-dashoffset="-376.4" stroke-dasharray="377 377" stroke-linecap="round" transform="rotate(-90,64,64)" stroke-width="8" stroke="hsl(3,90%,55%)" fill="none" r="60" cy="64" cx="64" class="pl__ring1"></circle>
	<circle stroke-dashoffset="-329.3" stroke-dasharray="329.9 329.9" stroke-linecap="round" transform="rotate(-90,64,64)" stroke-width="7" stroke="hsl(13,90%,55%)" fill="none" r="52.5" cy="64" cx="64" class="pl__ring2"></circle>
	<circle stroke-dashoffset="-288.6" stroke-dasharray="289 289" stroke-linecap="round" transform="rotate(-90,64,64)" stroke-width="6" stroke="hsl(23,90%,55%)" fill="none" r="46" cy="64" cx="64" class="pl__ring3"></circle>
	<circle stroke-dashoffset="-254" stroke-dasharray="254.5 254.5" stroke-linecap="round" transform="rotate(-90,64,64)" stroke-width="5" stroke="hsl(33,90%,55%)" fill="none" r="40.5" cy="64" cx="64" class="pl__ring4"></circle>
	<circle stroke-dashoffset="-225.8" stroke-dasharray="226.2 226.2" stroke-linecap="round" transform="rotate(-90,64,64)" stroke-width="4" stroke="hsl(43,90%,55%)" fill="none" r="36" cy="64" cx="64" class="pl__ring5"></circle>
	<circle stroke-dashoffset="-203.9" stroke-dasharray="204.2 204.2" stroke-linecap="round" transform="rotate(-90,64,64)" stroke-width="3" stroke="hsl(53,90%,55%)" fill="none" r="32.5" cy="64" cx="64" class="pl__ring6"></circle>
</svg>

<style>
/* From Uiverse.io by Nawsome - Tags: loader */
.pl {
  width: 8em;
  height: 8em;
}

.pl circle {
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

.pl__ring1 {
  animation: ring1_ 4s 0s ease-in-out infinite;
}

.pl__ring2 {
  animation: ring2_ 4s 0.04s ease-in-out infinite;
}

.pl__ring3 {
  animation: ring3_ 4s 0.08s ease-in-out infinite;
}

.pl__ring4 {
  animation: ring4_ 4s 0.12s ease-in-out infinite;
}

.pl__ring5 {
  animation: ring5_ 4s 0.16s ease-in-out infinite;
}

.pl__ring6 {
  animation: ring6_ 4s 0.2s ease-in-out infinite;
}

/* Animations */
@keyframes ring1_ {
  from {
    stroke-dashoffset: -376.237129776;
    transform: rotate(-0.25turn);
    animation-timing-function: ease-in;
  }

  23% {
    stroke-dashoffset: -94.247778;
    transform: rotate(1turn);
    animation-timing-function: ease-out;
  }

  46%, 50% {
    stroke-dashoffset: -376.237129776;
    transform: rotate(2.25turn);
    animation-timing-function: ease-in;
  }

  73% {
    stroke-dashoffset: -94.247778;
    transform: rotate(3.5turn);
    animation-timing-function: ease-out;
  }

  96%, to {
    stroke-dashoffset: -376.237129776;
    transform: rotate(4.75turn);
  }
}

@keyframes ring2_ {
  from {
    stroke-dashoffset: -329.207488554;
    transform: rotate(-0.25turn);
    animation-timing-function: ease-in;
  }

  23% {
    stroke-dashoffset: -82.46680575;
    transform: rotate(1turn);
    animation-timing-function: ease-out;
  }

  46%, 50% {
    stroke-dashoffset: -329.207488554;
    transform: rotate(2.25turn);
    animation-timing-function: ease-in;
  }

  73% {
    stroke-dashoffset: -82.46680575;
    transform: rotate(3.5turn);
    animation-timing-function: ease-out;
  }

  96%, to {
    stroke-dashoffset: -329.207488554;
    transform: rotate(4.75turn);
  }
}

@keyframes ring3_ {
  from {
    stroke-dashoffset: -288.4484661616;
    transform: rotate(-0.25turn);
    animation-timing-function: ease-in;
  }

  23% {
    stroke-dashoffset: -72.2566298;
    transform: rotate(1turn);
    animation-timing-function: ease-out;
  }

  46%, 50% {
    stroke-dashoffset: -288.4484661616;
    transform: rotate(2.25turn);
    animation-timing-function: ease-in;
  }

  73% {
    stroke-dashoffset: -72.2566298;
    transform: rotate(3.5turn);
    animation-timing-function: ease-out;
  }

  96%, to {
    stroke-dashoffset: -288.4484661616;
    transform: rotate(4.75turn);
  }
}

@keyframes ring4_ {
  from {
    stroke-dashoffset: -253.9600625988;
    transform: rotate(-0.25turn);
    animation-timing-function: ease-in;
  }

  23% {
    stroke-dashoffset: -63.61725015;
    transform: rotate(1turn);
    animation-timing-function: ease-out;
  }

  46%, 50% {
    stroke-dashoffset: -253.9600625988;
    transform: rotate(2.25turn);
    animation-timing-function: ease-in;
  }

  73% {
    stroke-dashoffset: -63.61725015;
    transform: rotate(3.5turn);
    animation-timing-function: ease-out;
  }

  96%, to {
    stroke-dashoffset: -253.9600625988;
    transform: rotate(4.75turn);
  }
}

@keyframes ring5_ {
  from {
    stroke-dashoffset: -225.7422778656;
    transform: rotate(-0.25turn);
    animation-timing-function: ease-in;
  }

  23% {
    stroke-dashoffset: -56.5486668;
    transform: rotate(1turn);
    animation-timing-function: ease-out;
  }

  46%, 50% {
    stroke-dashoffset: -225.7422778656;
    transform: rotate(2.25turn);
    animation-timing-function: ease-in;
  }

  73% {
    stroke-dashoffset: -56.5486668;
    transform: rotate(3.5turn);
    animation-timing-function: ease-out;
  }

  96%, to {
    stroke-dashoffset: -225.7422778656;
    transform: rotate(4.75turn);
  }
}

@keyframes ring6_ {
  from {
    stroke-dashoffset: -203.795111962;
    transform: rotate(-0.25turn);
    animation-timing-function: ease-in;
  }

  23% {
    stroke-dashoffset: -51.05087975;
    transform: rotate(1turn);
    animation-timing-function: ease-out;
  }

  46%, 50% {
    stroke-dashoffset: -203.795111962;
    transform: rotate(2.25turn);
    animation-timing-function: ease-in;
  }

  73% {
    stroke-dashoffset: -51.05087975;
    transform: rotate(3.5turn);
    animation-timing-function: ease-out;
  }

  96%, to {
    stroke-dashoffset: -203.795111962;
    transform: rotate(4.75turn);
  }
}
</style>