title: CSS3/Canvas - loader/spinner/preloader
body: <p>I would like to make a CSS3 (preferred) or canvas spinner like this one <a href="http://jsfiddle.net/webtiki/Mwjn9/" rel="nofollow">http://jsfiddle.net/webtiki/Mwjn9/</a></p>
  
  <p>But when the light green circle is complete, instead of starting again, I would like the circle to be filled with dark green (in the same way it was filled with light green), and then start again. </p>
  
  <p>Basically, circle starts with color A, is filled with Color B, filled with color A and it starts again.</p>
  
  <p>How can I achieve this ?</p>
  
  <p>I tried of editing this part in different ways but couldn't achieve it.</p>
  
  <pre><code>@-webkit-keyframes spin1 {
      0%   { -webkit-transform:rotate(0deg); }
      50%  { -webkit-transform:rotate(180deg); }
      100% { -webkit-transform:rotate(180deg); }
  }
  @keyframes spin1 {
      0%   { transform:rotate(0deg); }
      50%  { transform:rotate(180deg); }
      100% { transform:rotate(180deg); }
  }
  @-webkit-keyframes spin2 {
      0%   { -webkit-transform:rotate(0deg);opacity:0; }
      49.99%   { opacity:0; }
      50%  { -webkit-transform:rotate(0deg);opacity:1; }
      100% { -webkit-transform:rotate(180deg);opacity:1; }
  }
  @keyframes spin2 {
      0%   { transform:rotate(0deg);opacity:0; }
      49.99%   { opacity:0; }
      50%  { transform:rotate(0deg);opacity:1; }
      100% { transform:rotate(180deg);opacity:1; }
  }
  </code></pre>