Following Steps:
1: HTML Part
2: Additional CSS Part (style.css)
3: Progress bar CSS Part (circle-progresbar.css)
4: Progress Bar JS Part (circle-progresbar.js)
NOTE: Default jquery version is: jquery-3.3.1.min.js
.
Thats all.................



/***************HTML PART***************/
<section class="skill-section" id="skill">
    <div class="container">
        <div class="row">
           <div class="col-lg-3 col-md-3 col-sm-6">
               <svg class="radial-progress web" data-percentage="90" viewBox="0 0 80 80">
                  <circle class="incomplete" cx="40" cy="40" r="35"></circle>
                  <circle class="complete" cx="40" cy="40" r="35" style="stroke-dashoffset:39.58406743523136;"></circle>
                  <text class="percentage" x="50%" y="57%" transform="matrix(0, 1, -1, 0, 80, 0)">90%</text>
               </svg>
               <h3>Web design</h3>
           </div>
           <div class="col-lg-3 col-md-3 col-sm-6">
               <svg class="radial-progress ui" data-percentage="85" viewBox="0 0 80 80">
                  <circle class="incomplete" cx="40" cy="40" r="35"></circle>
                  <circle class="complete" cx="40" cy="40" r="35" style="stroke-dashoffset:39.58406743523136;"></circle>
                  <text class="percentage" x="50%" y="57%" transform="matrix(0, 1, -1, 0, 80, 0)">85%</text>
               </svg>
               <h3>UI/UX</h3>
           </div>
           <div class="col-lg-3 col-md-3 col-sm-6">
               <svg class="radial-progress html-css" data-percentage="70" viewBox="0 0 80 80">
                  <circle class="incomplete" cx="40" cy="40" r="35"></circle>
                  <circle class="complete" cx="40" cy="40" r="35" style="stroke-dashoffset:39.58406743523136;"></circle>
                  <text class="percentage" x="50%" y="57%" transform="matrix(0, 1, -1, 0, 80, 0)">70%</text>
               </svg>
               <h3>HTML/CSS</h3>
           </div>
           <div class="col-lg-3 col-md-3 col-sm-6">
               <svg class="radial-progress wp" data-percentage="95" viewBox="0 0 80 80">
                  <circle class="incomplete" cx="40" cy="40" r="35"></circle>
                  <circle class="complete" cx="40" cy="40" r="35" style="stroke-dashoffset:39.58406743523136;"></circle>
                  <text class="percentage" x="50%" y="57%" transform="matrix(0, 1, -1, 0, 80, 0)">95%</text>
               </svg>
               <h3>Wordpress</h3>
           </div>
        </div>
    </div>
    </section>




/**************CSS PART**************/
.skill-section {
    background: linear-gradient(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.85)), url(../img/skill/img.jpg);
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
}

svg.radial-progress circle{
    stroke-width: 3;
}

svg.radial-progress text{
    fill: #000;
}

svg.web circle{
    stroke: #CC1DB9;
}

svg.ui circle{
    stroke: #8f58f6;
}

svg.html-css circle{
    stroke: #a6ce39;
}

svg.wp circle{
    stroke: #2a3682;
}



/**************ADDITIONAL CSS PART**************/
svg.radial-progress {
  height: auto;
  max-width: 200px;
  padding: 1em;
  transform: rotate(-90deg);
  width: 100%;
}

svg.radial-progress circle {
  fill: rgba(0,0,0,0);
  stroke: #fff;
  stroke-dashoffset: 219.91148575129;
  stroke-width: 10;
}

svg.radial-progress circle.incomplete { opacity: 0.25; }

svg.radial-progress circle.complete { stroke-dasharray: 219.91148575129; }

svg.radial-progress text {
  fill: #fff;
  text-anchor: middle;
}




/**************ADDITIONAL JS PART**************/
$('svg.radial-progress').each(function( index, value ) {
  $(this).find($('circle.complete')).removeAttr( 'style' );
});

$(window).scroll(function(){
  $('svg.radial-progress').each(function( index, value ) {
    // If svg.radial-progress is approximately 25% vertically into the window when scrolling from the top or the bottom
    if (
        $(window).scrollTop() > $(this).offset().top - ($(window).height() * 0.75) &&
        $(window).scrollTop() < $(this).offset().top + $(this).height() - ($(window).height() * 0.25)
    ) {
        // Get percentage of progress
        percent = $(value).data('percentage');
        // Get radius of the svg's circle.complete
        radius = $(this).find($('circle.complete')).attr('r');
        // Get circumference (2πr)
        circumference = 2 * Math.PI * radius;
        // Get stroke-dashoffset value based on the percentage of the circumference
        strokeDashOffset = circumference - ((percent * circumference) / 100);
        // Transition progress for 1.25 seconds
        $(this).find($('circle.complete')).animate({'stroke-dashoffset': strokeDashOffset}, 1250);
    }
  });
}).trigger('scroll');