JSFiddle - React, Tailwind, and code Playground

by phloe

HTML

<svg viewBox="0 0 24 24">
  <defs>
    <clipPath id="dre-loading-animation-icon__ring-mask" clip-rule="evenodd">
      <path d="M0,12 a 12,12 0 1,1 24,0 12,12 0 1,1 -24,0 h2 a 10,10 0 1,1 20,0 10,10 0 1,1 -20,0z" />
    </clipPath>
  </defs>
  <foreignObject width="24" height="24" clip-path="url(#dre-loading-animation-icon__ring-mask)">
    <div class="dre-loading-animation-icon__gradient" />
  </foreignObject>
</svg>

SCSS

.dre-loading-animation-icon {
  path {
    fill: #000;
  }

  &__gradient {
    background: conic-gradient(transparent, currentColor);
    animation: 100s dre-loading-animation-icon-rotation 0s linear infinite;
    transform-origin: 50% 50%;
    width: 24px;
    height: 24px;
  }

  @keyframes dre-loading-animation-icon-rotation{
    0% {
      transform: rotate(0deg)
    }
    50% {
      transform: rotate(180deg)
    }
    to{
      transform: rotate(360deg)}
  }
}