title: javascript canvas pie loader pause when loaded
body: <p>I've got a script which works as pie loader, but the loader part disappears once it hits the full circle. I'd like it to stop when the "timer" hits 100% (aka a full circle). But I can't figure it out. </p>
  
  <p>Here's my code</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-js lang-js prettyprint-override"><code>var loader = document.getElementById('pie-loader'),
    α = 0,
    π = Math.PI,
    t = 22,
    tdraw;
  
  function PieDraw() {
    α++;
    α %= 360;
    var r = (α * π / 180),
      x = Math.sin(r) * 90,
      y = Math.cos(r) * -90,
      mid = (α &gt; 180) ? 1 : 0,
      anim = 'M 0 0 v -90 A 90 90 1 ' + mid + ' 1 ' + x + ' ' + y + ' z';
    loader.setAttribute('d', anim);
    if (α != 0) {
      tdraw = setTimeout(PieDraw, t);
    }
  }
  PieDraw();</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.pie svg {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 100;
    display: block;
    width: 180px;
    height: 180px;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    pointer-events: none
  }
  
  .pie #pie-loader {
    fill: #155385;
    fill-opacity: .5
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="pie"&gt;
    &lt;svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="180" height="180" viewbox="0 0 180 180"&gt;&lt;path id="pie-loader" transform="translate(90,90)" /&gt;&lt;/svg&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Any help with stopping this once the blue circle is full, that would be greatly appreciated!</p>
  
  <p>I've tried adding this, but it's not 100% full.</p>
  
  <pre><code>function PiePause(){
    clearTimeout(tdraw);
    var anim = 'M 0 0 v -90 A 90 90 1 1 1 -3.140954703225074 -89.94517443171861 z';
    loader.setAttribute('d',anim);
  }
  </code></pre>
  
  <p>Thank you.</p>