Windows 8 style loading circle

windows-8-circle.svg

<!-- https://codepen.io/daydreamer-json/pen/yyLjEVK -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
  <style>
    :root {
      --bg-color: rgba(0, 0, 0, 0);
      --dot-radius: 24px;
      --dot-color: #000;
      --duration: 5400ms;
      --base-delay: 200ms;
      --easing: cubic-bezier(0.215, 0.75, 0.84, 0.17);
    }
    svg { background-color: var(--bg-color) }
    g {
      opacity: 0;
      transform: translate(256px, 256px);
      animation: rotation var(--duration) var(--easing) infinite,
        opacity-cycle var(--duration) step-end infinite;
    }
    circle {
      transform: translate(0px, calc(256px - var(--dot-radius)));
      r: var(--dot-radius);
      fill: var(--dot-color);
    }
    @keyframes rotation {
      0% { transform: translate(256px, 256px) rotate(0deg); }
      38.89% { transform: translate(256px, 256px) rotate(360deg); }
      77.78%, to { transform: translate(256px, 256px) rotate(720deg); }
    }
    @keyframes opacity-cycle { 0% { opacity: 1 } 77.78%, to { opacity: 0 } }
    g:nth-child(2) { animation-delay: calc(var(--base-delay) * 1) }
    g:nth-child(3) { animation-delay: calc(var(--base-delay) * 2) }
    g:nth-child(4) { animation-delay: calc(var(--base-delay) * 3) }
    g:nth-child(5) { animation-delay: calc(var(--base-delay) * 4) }
    g:nth-child(6) { animation-delay: calc(var(--base-delay) * 5) }
  </style>
  <g><circle /></g>
  <g><circle /></g>
  <g><circle /></g>
  <g><circle /></g>
  <g><circle /></g>
  <g><circle /></g>
</svg>