title: circlebar.js:11 Uncaught TypeError: $(...).find(...).circle is not a function
body: <p>I am trying to build a circle bar with jQuery, but there is one error showing in the console, which cannot be solved. Have googled around, but nothing happened. Does anyone know how I can fixed this error? It is right that the code cannot run by snippet, because of this. So please do not downvote this, it is part of this issue. </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>$(document).ready(function ($) {
      function animateElements() {
          $('.progressbar').each(function () {
              var elementPos = $(this).offset().top;
              var topOfWindow = $(window).scrollTop();
              var percent = $(this).find('.circle').attr('data-percent');
              var percentage = parseInt(percent, 10) / parseInt(100, 10);
              var animate = $(this).data('animate');
              if (elementPos &lt; topOfWindow + $(window).height() - 30 &amp;&amp; !animate) {
                  $(this).data('animate', true);
                  $(this).find('.circle').circleProgress({
                      startAngle: -Math.PI / 2,
                      value: percentage,
                      thickness: 8,
                      fill: {
                          color: '#1B58B8'
                      }
                  }).on('circle-animation-progress', function (event, progress, stepValue) {
                      $(this).find('div').text(String(stepValue.toFixed(2)).substr(2) + '%');
                  }).stop();
              }
          });
      }
  
      // Show animated elements
      animateElements();
      $(window).scroll(animateElements);
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.progressbar {
      display: inline-block;
      width: 100px;
      margin: 25px;
  }
  .circle {
      width: 100%;
      margin: 0 auto;
      margin-top: 10px;
      display: inline-block;
      position: relative;
      text-align: center;
  }
  .circle canvas {
      vertical-align: middle;
  }
  .circle div {
      position: absolute;
      top: 30px;
      left: 0;
      width: 100%;
      text-align: center;
      line-height: 40px;
      font-size: 20px;
  }
  .circle strong i {
      font-style: normal;
      font-size: 0.6em;
      font-weight: normal;
  }
  .circle span {
      display: block;
      color: #aaa;
      margin-top: 12px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;div style="width:100%;height:500px;"&gt;&lt;/div&gt;
  
  &lt;h3&gt;Sed scelerisque&lt;/h3&gt;
  
  &lt;div class="progressbar" data-animate="false"&gt;
      &lt;div class="circle" data-percent="98"&gt;
          &lt;div&gt;&lt;/div&gt;
          &lt;p&gt;Quisque's&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="progressbar" data-animate="false"&gt;
      &lt;div class="circle" data-percent="30"&gt;
          &lt;div&gt;&lt;/div&gt;
          &lt;p&gt;Maecenas&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="progressbar" data-animate="false"&gt;
      &lt;div class="circle" data-percent="77"&gt;
          &lt;div&gt;&lt;/div&gt;
          &lt;p&gt;Pellentesque&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="progressbar" data-animate="false"&gt;
      &lt;div class="circle" data-percent="49"&gt;
          &lt;div&gt;&lt;/div&gt;
          &lt;p&gt;Etiam sodales&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div style="width:100%;height:500px;"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>