<div class="skills-graph-circle">
  <span class="skills-graph-circle__count" data-skills-graph-perc="83">0</span>
  <svg width="200" height="200">
    <circle class="skills-graph-circle__backg" r="80" cx="100" cy="100" stroke-width="6" fill="none"></circle>
    <circle class="skills-graph-circle__bar" r="80" cx="100" cy="100" stroke-dasharray="502.4" stroke-dashoffset="502.4" stroke-width="6" fill="none" transform="rotate(-90 100 100)"></circle>
  </svg>
</div>

body {
  background: #1C1C1C;
}
.skills {
  &-graph-circle {
    position: relative;
    width: 200px;
    height: 200px;
    padding: 10px 0;
    margin: auto;
    &__title {
      color: white;
      font-weight: 300;
      letter-spacing: 2px;
    }
    &__count {
      position: absolute;
      top: 50%;
      left: 50%;
      color: white;
      transform: translate(-50%, -50%);
      &:after {
        content: '%';
      }
    }
    &__bar {
      stroke: tomato;
    }
    &__backg {
      stroke: transparentize(tomato, .7);
    }
  }
}

var circleEl = document.querySelector('.skills-graph-circle'),
    progressBar = circleEl.querySelector('.skills-graph-circle__bar'),
    r = progressBar.getAttribute('r'),
    circumference = 2 * Math.PI * r,
    countEl = document.querySelector('.skills-graph-circle__count'),
    countVal = parseInt(countEl.getAttribute('data-skills-graph-perc'));

    var smth = $(circleEl).animate({
      value: countVal
    }, {
      duration: 3600,
      easing: 'linear',
      step: function (currentValue) {
        progressBar.style.strokeDashoffset = circumference - (currentValue * circumference / 100);
        countEl.textContent = Math.ceil(currentValue);
      }
    });