650

· 👁 39 views

Wow in #svg we can have #css, like

<svg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'>

  <style>
    .spinner_a {
      animation: spinner_MGfb .8s linear infinite;
      animation-delay: -.8s;
    }

    .spinner_b {
      animation-delay: -.65s;
    }

    .spinner_c {
      animation-delay: -.5s;
    }

    @keyframes spinner_MGfb {
      0%   { fill: black; }
      50%  { fill: white; }
      100% { fill: black; }
    }
  </style>

  <circle class='spinner_a' cx='4' cy='12' r='3'/>
  <circle class='spinner_a spinner_b' cx='12' cy='12' r='3'/>
  <circle class='spinner_a spinner_c' cx='20' cy='12' r='3'/>

</svg>

and it works with usual <img src='my.svg'/>