Metalmorphic loading spinners

              
                <style>
  @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;500;900&display=swap");

  body {
    font-family: "Roboto", sans-serif;
    font-size: 16px;
    font-weight: 500;
  }

  .metalli-sm {
    --convexity: 3;
    font-size: 0.8em;
  }

  .metalli-m {
    --convexity: 3;
    font-size: 1em;
  }

  .metalli-lg {
    --convexity: 3;
    font-size: 1.25em;
  }

  .metalli-xlg {
    --convexity: 3;
    font-size: 1.5625em;
  }


  @keyframes rotate {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

  @keyframes inverse-rotate {
    from {
      transform: rotate(360deg);
    }
    to {
      transform: rotate(0deg);
    }
  }

  .metalli-spinner {
    animation: 1s linear infinite rotate;
    border-radius: 1.25em;
    clip-path: polygon(
      100% 50%,
      100% 100%,
      0 100%,
      0 0,
      100% 0,
      100% 50%,
      85% 50%,
      50% 50%,
      50% 15%,
      45.65% 15.27%,
      42.21% 15.88%,
      38.85% 16.82%,
      35.6% 18.1%,
      32.5% 19.69%,
      29.57% 21.58%,
      26.84% 23.76%,
      24.34% 26.19%,
      22.1% 28.87%,
      20.13% 31.75%,
      18.47% 34.81%,
      17.11% 38.03%,
      16.08% 41.36%,
      15.39% 44.78%,
      15.04% 48.26%,
      15.04% 51.74%,
      15.39% 55.22%,
      16.08% 58.64%,
      17.11% 61.97%,
      18.47% 65.19%,
      20.13% 68.25%,
      22.1% 71.13%,
      24.34% 73.81%,
      26.84% 76.24%,
      29.57% 78.42%,
      32.5% 80.31%,
      35.6% 81.9%,
      38.85% 83.18%,
      42.21% 84.12%,
      45.65% 84.73%,
      49.13% 84.99%,
      52.62% 84.9%,
      56.08% 84.47%,
      59.48% 83.69%,
      62.79% 82.58%,
      65.97% 81.15%,
      68.99% 79.4%,
      71.82% 77.36%,
      74.44% 75.06%,
      76.81% 72.5%,
      78.92% 69.72%,
      80.74% 66.74%,
      82.25% 63.6%,
      83.45% 60.32%,
      84.31% 56.94%,
      84.83% 53.48%,
      85% 50%,
      50% 50%,
      100% 50%,
      100% 0%,
      50% 0%,
      50% 50%
    );
    display: inline-block;
    height: 2.5em;
    margin: 0.5em;
    width: 2.5em;
  }

  .metalli-spinner .metallicss {
    animation: 1s linear infinite inverse-rotate;
    border-radius: 1.25em;
    box-shadow: none !important;
    display: inline-block;
    height: 2.5em;
    margin: 0 1.5em 0 0;
    width: 2.5em;
  }
</style>
<span
  style="filter: drop-shadow(rgba(0, 0, 0, 0.19) 1px 2px 2px) drop-shadow(rgba(0, 0, 0, 0.13) 2px 4px 4px);"
>
  <div class="metalli-spinner metalli-xlg">
    <div
      class="metallicss"
      style="background-color: rgb(128, 128, 128); --metal:copper;"
    ></div>
  </div>
</span>
<span
  style="filter: drop-shadow(rgba(0, 0, 0, 0.19) 1px 2px 2px) drop-shadow(rgba(0, 0, 0, 0.13) 2px 4px 4px);"
>
  <div class="metalli-spinner metalli-xlg">
    <div
      class="metallicss"
      style="background-color: rgb(128, 128, 128); --metal:gold;"
    ></div>
  </div>
</span>
<span
  style="filter: drop-shadow(rgba(0, 0, 0, 0.19) 1px 2px 2px) drop-shadow(rgba(0, 0, 0, 0.13) 2px 4px 4px);"
>
  <div class="metalli-spinner metalli-xlg">
    <div
      class="metallicss"
      style="background-color: rgb(128, 128, 128); --metal:lead;"
    ></div>
  </div>
</span>
<span
  style="filter: drop-shadow(rgba(0, 0, 0, 0.19) 1px 2px 2px) drop-shadow(rgba(0, 0, 0, 0.13) 2px 4px 4px);"
>
  <div class="metalli-spinner metalli-xlg">
    <div
      class="metallicss"
      style="background-color: rgb(128, 128, 128); --metal:silver;"
    ></div>
  </div>
</span>
<script
  type="module"
  defer="true"
  src="https://unpkg.com/metallicss/dist/metallicss.min.js"
></script>
<br />
<a href="https://www.metalmorphism.com/" target="_blank">Licence</a>
              
            

!