title: Dyanmic resize a CSS3 loading spinner by pixels
body: <p>I've been asked to take a pure CSS3 loading spinner and make it dynamically resizable by pixels to use in different places in a program.</p>
  <p>My current code is: (Which apparently doesn't run well in SO's snippets)</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.loader {
    animation:spin 1s infinite linear;
    border:solid 2vmin transparent;
    border-radius:50%;
    border-right-color:#71c491;
    border-top-color:#f7941d;
    box-sizing:border-box;
    height:20vmin;
    left:calc(50% - 10vmin);
    position:fixed;
    top:calc(50% - 10vmin);
    width:20vmin;
    z-index:1;
    &amp;:before {
      animation:spin 2s infinite linear;
      border:solid 2vmin transparent;
      border-radius:50%;
      border-right-color:#21409a;
      border-top-color:#92278f;
      box-sizing:border-box;
      content:"";
      height:16vmin;
      left:0;
      position:absolute;
      top:0;
      width:16vmin;
    }
    &amp;:after {
      animation:spin 3s infinite linear;
      border:solid 2vmin transparent;
      border-radius:50%;
      border-right-color:#13b0e6;
      border-top-color:#18244c;
      box-sizing:border-box;
      content:"";
      height:12vmin;
      left:2vmin;
      position:absolute;
      top:2vmin;
      width:12vmin;
    }
  }
  
  @keyframes spin {
    100% {
      transform:rotate(360deg);
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="loader"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>I googled and tried transform:scale() but as far as I can tell that only takes specific input and increases/decreases the size by percentage. (2 = 200% size)</p>
  <p>I'm thinking I need some sort of wrapper, but I'm not too familiar with advanced CSS to get the effect. When I tried to create my own, only the top border of the spinner would be resized into a weird shape and not the inner borders. I'm just stumped. If you could point me in the right direction, I'd be appreciative. Thank you.</p>