Here’s a small animated SVG snippet of a loading spinner. Since it’s a SVG, it scales well and can inherit the color, so very customizable. It’s already animated so you don’t need to add keyframes and hence I found it very flexible.

The below SVG can also be converted into a React component or perhaps a const and used in React projects.

Preview

Animate Spinner SVG

Code

<svg version="1.0" width="100%" height="100%" viewBox="0 0 128 128">
  <g>
    <path d="M59.6 0h8v40h-8V0z" fill="#000" />
    <path d="M59.6 0h8v40h-8V0z" fill="#ccc" transform="rotate(30 64 64)" />
    <path d="M59.6 0h8v40h-8V0z" fill="#ccc" transform="rotate(60 64 64)" />
    <path d="M59.6 0h8v40h-8V0z" fill="#ccc" transform="rotate(90 64 64)" />
    <path d="M59.6 0h8v40h-8V0z" fill="#ccc" transform="rotate(120 64 64)" />
    <path d="M59.6 0h8v40h-8V0z" fill="#b2b2b2" transform="rotate(150 64 64)" />
    <path d="M59.6 0h8v40h-8V0z" fill="#999" transform="rotate(180 64 64)" />
    <path d="M59.6 0h8v40h-8V0z" fill="#7f7f7f" transform="rotate(210 64 64)" />
    <path d="M59.6 0h8v40h-8V0z" fill="#666" transform="rotate(240 64 64)" />
    <path d="M59.6 0h8v40h-8V0z" fill="#4c4c4c" transform="rotate(270 64 64)" />
    <path d="M59.6 0h8v40h-8V0z" fill="#333" transform="rotate(300 64 64)" />
    <path d="M59.6 0h8v40h-8V0z" fill="#191919" transform="rotate(330 64 64)" />
    <animateTransform
      attributeName="transform"
      type="rotate"
      values="0 64 64;30 64 64;60 64 64;90 64 64;120 64 64;150 64 64;180 64 64;210 64 64;240 64 64;270 64 64;300 64 64;330 64 64"
      calcMode="discrete"
      dur="720ms"
      repeatCount="indefinite"
    ></animateTransform>
  </g>
</svg>