jQuery circle progress bar and percentage text animation when screen visible
<p>I'm a novice in jQuery and I'm using jquery-circle-progress plugin by kottenator. I've four circles and I want to animate its bar and percentage text when it's area visible on the screen. Like most of websites make the effect.</p>

<p>Could anyone please help me to make that effect with a little explanation? Thanks in advance, Dear. <a href="https://jsfiddle.net/minhaz/9jfn6mh9/3/" rel="nofollow noreferrer">My fiddle</a></p>

<p>HTML:</p>

<pre><code>&lt;section class="firstDiv"&gt;&lt;/section&gt;
&lt;section class="secondDiv"&gt;&lt;/section&gt;
&lt;div class="thirdDiv"&gt;
  &lt;div id="circle1"&gt;
    &lt;span class="rate"&gt;85%&lt;/span&gt;
  &lt;/div&gt;
    &lt;div id="circle2"&gt;
    &lt;span class="rate"&gt;90%&lt;/span&gt;
  &lt;/div&gt;
    &lt;div id="circle3"&gt;
    &lt;span class="rate"&gt;80%&lt;/span&gt;
  &lt;/div&gt;
    &lt;div id="circle4"&gt;
    &lt;span class="rate"&gt;70%&lt;/span&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>CSS:</p>

<pre><code>section{ height: 700px; overflow: hidden;}
.firstDiv{ background: blue;}
.secondDiv{ background: yellow;}
.thirdDiv div{
         float: left;
         width: 25%;
         overflow: hidden;
         margin: 50px 0;
         position: relative;
         }
.rate{
  position: absolute;
  top: 40%;
  left: 25%;
}
</code></pre>

<p>JS:</p>

<pre><code>  $('#circle1').circleProgress({
    value: 0.85,
    size: 100,
    fill: {
      gradient: [ "#FD0000" , "#FD7300", "#FDBD00"]
    }
  });


  $('#circle2').circleProgress({
    value: 0.90,
    size: 100,
    fill: {
      gradient: ["#00B050", "#00CA00", "#9EEC00"]
    }
  });


  $('#circle3').circleProgress({
    value: 0.80,
    size: 100,
    fill: {
      gradient: ["#FDFD00", "#FDE700", "#CDF500"]
    }
  });


  $('#circle4').circleProgress({
    value: 0.70,
    size: 100,
    fill: {
      gradient: ["#123FAA", "#3914AE", "#0B63A3"]
    }
  });
</code></pre>

<p><a href="https://jsfiddle.net/minhaz/9jfn6mh9/3/" rel="nofollow noreferrer">My fiddle</a></p>