galaxy/loaders/elijahgummer_sharp-squid-77.html

<div class="loader"></div>

<style>
/* From Uiverse.io by elijahgummer  - Tags: loading, loader, star, circle, waiting, point */
.loader {
  display: inline-grid;
  width: 80px;
  aspect-ratio: 1;
  animation: l12-0 3s linear infinite;
}
.loader:before,
.loader:after {
  content: "";
  grid-area: 1/1;
}
.loader:before {
  clip-path: polygon(
    100% 50%,
    83.81% 59.06%,
    93.3% 75%,
    74.75% 74.75%,
    75% 93.3%,
    59.06% 83.81%,
    50% 100%,
    40.94% 83.81%,
    25% 93.3%,
    25.25% 74.75%,
    6.7% 75%,
    16.19% 59.06%,
    0% 50%,
    16.19% 40.94%,
    6.7% 25%,
    25.25% 25.25%,
    25% 6.7%,
    40.94% 16.19%,
    50% 0%,
    59.06% 16.19%,
    75% 6.7%,
    74.75% 25.25%,
    93.3% 25%,
    83.81% 40.94%
  );
  background: #1c1d1e;
  transform: rotate(0turn) translate(-12.5%) rotate(0turn);
  animation:
    l12-1 2s linear infinite,
    l12-2 4s linear infinite alternate;
}
.loader:after {
  margin: 12.5%;
  clip-path: polygon(
    100% 50%,
    78.19% 60.26%,
    88.3% 82.14%,
    65% 75.98%,
    58.68% 99.24%,
    44.79% 79.54%,
    25% 93.3%,
    27.02% 69.28%,
    3.02% 67.1%,
    20% 50%,
    3.02% 32.9%,
    27.02% 30.72%,
    25% 6.7%,
    44.79% 20.46%,
    58.68% 0.76%,
    65% 24.02%,
    88.3% 17.86%,
    78.19% 39.74%
  );
  background: #edf0f2;
  animation: l12-3 4s linear infinite alternate;
}
@keyframes l12-0 {
  to {
    rotate: 1turn;
  }
}
@keyframes l12-1 {
  to {
    transform: rotate(-1turn) translate(-12.5%) rotate(0.75turn);
  }
}
@keyframes l12-2 {
  90%,
  to {
    clip-path: polygon(
      100% 50%,
      98.3% 62.94%,
      93.3% 75%,
      85.36% 85.36%,
      75% 93.3%,
      62.94% 98.3%,
      50% 100%,
      37.06% 98.3%,
      25% 93.3%,
      14.64% 85.36%,
      6.7% 75%,
      1.7% 62.94%,
      0% 50%,
      1.7% 37.06%,
      6.7% 25%,
      14.64% 14.64%,
      25% 6.7%,
      37.06% 1.7%,
      50% 0%,
      62.94% 1.7%,
      75% 6.7%,
      85.36% 14.64%,
      93.3% 25%,
      98.3% 37.06%
    );
  }
}
@keyframes l12-3 {
  90%,
  to {
    clip-path: polygon(
      100% 50%,
      96.98% 67.1%,
      88.3% 82.14%,
      75% 93.3%,
      58.68% 99.24%,
      41.32% 99.24%,
      25% 93.3%,
      11.7% 82.14%,
      3.02% 67.1%,
      0% 50%,
      3.02% 32.9%,
      11.7% 17.86%,
      25% 6.7%,
      41.32% 0.76%,
      58.68% 0.76%,
      75% 6.7%,
      88.3% 17.86%,
      96.98% 32.9%
    );
  }
}

</style>