Circle progress bar

by David Gonzalez

HTML

<script src="https://www.jqueryscript.net/demo/Animated-Circular-Progress-Bar-with-jQuery-Canvas-Circle-Progress/dist/circle-progress.js"></script>
<!--  <div style="width:100%;height:800px;">↓ Scroll down ↓</div>
-->
<div class="container material-icons" >
<h3>Title (Placeholder)</h3>

<div class="progressbar" data-animate="false">
    <div class="circle" data-percent="46">
        <div></div>
        <p>Callbacks</p>
    </div>
</div>
<div class="progressbar" data-animate="false">
    <div class="circle" data-percent="45">
        <div></div>
        <p>Graphical</p>
    </div>
</div>
<div class="progressbar" data-animate="false">
    <div class="circle" data-percent="38">
        <div></div>
        <p>Object-Interaction</p>
    </div>
</div>
<div class="progressbar" data-animate="false">
    <div class="circle" data-percent="12">
        <div></div>
        <p>Language</p>
    </div>
</div>
<div style="width:100%;height:500px;"></div>
</div>

CSS

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://example.com/MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
    local('MaterialIcons-Regular'),
    url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'),
    url(https://example.com/MaterialIcons-Regular.woff) format('woff'),
    url(https://example.com/MaterialIcons-Regular.ttf) format('truetype');
}
.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}
.progressbar {
    display: inline-block;
    width: 100px;
    margin: 25px;
}
.container{
  background-color:white;
}
.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: 34px;
}
.circle strong i {
    font-style: normal;
    font-size: 0.6em;
    font-weight: normal;
}
.circle span {
    display: block;
    color: #aaa;
    margin-top: 12px;
}

JavaScript

$(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 < topOfWindow + $(window).height() - 30 && !animate) {
                $(this).data('animate', true);
                $(this).find('.circle').circleProgress({
                    startAngle: -Math.PI / 2,
                    value: percent / 100,
                    thickness: 14,
                    fill: {
                        color: '#1B58B8'
                    }
                }).on('circle-animation-progress', function (event, progress, stepValue) {
                    $(this).find('div').text(parseInt((stepValue*100)) + "%");
                }).stop();
            }
        });
    }

    // Show animated elements
    animateElements();
    $(window).scroll(animateElements);
});