title: SVG animation by just adding a class
body: <p>I created an svg loader animation using SMIL animation. I am showing the svg inside an element by just adding a class name i.e <code>loader</code>.</p>
  
  <p><a href="https://plnkr.co/edit/uvH9gJRhdpBnxyDcPH1L?p=preview" rel="nofollow"><strong>Fiddle</strong></a> (<em>click on the container to view the loader</em>)</p>
  
  <pre><code>.loader{
      position: relative;
  }
  
  /* image */
  .loader::before {
      background-image: url('loader.svg');
      /* other properties */
  } 
  
  /* blocker */
  .loader::after {
      /* other properties */
  }
  </code></pre>
  
  <p>But now, I realized the <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/SVG_animation_with_SMIL" rel="nofollow">SMIL is deprecated in chrome</a>. So, I decided to handle animations using CSS. But if I handle animations using css, then I will not be able to manage the code as I am doing above i.e just by adding a class.</p>
  
  <p>If I am using css animations, I need to add a new element inside the container and then use inline-svg concept, IMO.</p>
  
  <p>Is there anyway, I can manage the animation by just adding a class when using css animations?</p>
  
  <p>Some points:</p>
  
  <ul>
  <li>I don't want to add any new elements.</li>
  <li>I will use JavaScript just to add a class and for nothing else.</li>
  <li>I don't want to generate a gif (<em>a raster image</em>).</li>
  </ul>
  
  <p>I have fiddles for both SMIL and CSS animations:</p>
  
  <ul>
  <li><a href="http://codepen.io/Mr_Green/pen/MyEedK" rel="nofollow">SVG using SMIL animation</a></li>
  <li><a href="http://codepen.io/Mr_Green/pen/WwZxWV?editors=1100" rel="nofollow">SVG using CSS animation</a></li>
  </ul>
  
  <p>I am just limited only to add a class to manage the animation because it keeps my code organised and also I feel it is possible to do so with css animations as well.</p>