title: How to make a circle spinning within another circle using Webkit Animation
body: <p>I'm trying to make a circle spinning within another spinning circle.</p>
  
  <p>I'm using Webkit Animation. The code works for two separate circles, but not connected.</p>
  
  <pre><code>&lt;style&gt; 
  .loader { 
    border: 16px solid #f3f3f3; 
    border-radius: 50%; 
    border-top: 16px solid #3498db; 
    margin-left: 170px; 
    width: 120px; 
    height: 120px; 
    -webkit-animation: spin .25s linear infinite; /* Safari */ 
    animation: spin .25s linear infinite; 
  } 
  .loader2 { 
    border: 16px solid #f3f3f3; 
    border-radius: 50%; 
    border-top: 16px solid #3498db; 
    width: 300px; 
    height: 300px; 
    -webkit-animation: spin2 .25s linear infinite; /* Safari */ 
    animation: spin2 .25s linear infinite; 
  }
  @-webkit-keyframes spin { 
    0% { -webkit-transform: rotate(0deg); } 
    100% { -webkit-transform: rotate(360deg); } 
  } 
  
  @keyframes spin { 
    0% { transform: rotate(0deg); } 
    100% { transform: rotate(360deg); } 
  } 
  @-webkit-keyframes spin2 { 
    0% { -webkit-transform: rotate(0deg); } 
    100% { -webkit-transform: rotate(360deg); } 
  }   
  @keyframes spin2 { 
    0% { transform: rotate(0deg); } 
    100% { transform: rotate(360deg); } 
  } 
  &lt;/style&gt; 
  &lt;/head&gt; 
  &lt;body&gt; 
  &lt;h2&gt;How To Create A Loader&lt;/h2&gt; 
  
  &lt;div class="loader"&gt;
      &lt;/div&gt; 
   &lt;div class="loader2"&gt;&lt;/div&gt; 
  &lt;/body&gt;&lt;/html&gt;
  </code></pre>
  
  <p>Expected output is one circle spinning inside another spinning circle</p>