ProgressBar.js

index.html

<div class="progress-js">
    
</div>

<div class="progressPercentage">
    <p id="percent-text">0</p>
</div>

ProgressBar.js.markdown

ProgressBar.js

A Pen by Cole on CodePen.

License.

script.js

var progressBar = new ProgressBar.Circle('.progress-js', {
  strokeWidth: 5,
  trailColor: '#000',
  trailWidth: 1,
  color: '#FCB03C',
  easing: 'bounce',
  duration: 2000,
  text: {
    value: '52'
  },

});

progressBar.animate(.5, function() {
  //progressBar.animate(0);
});

var percent = document.getElementById('percent-text');
var progressPercentage = new ProgressBar.Circle('.progressPercentage', {
  color: '#000000',
  trailColor: '#E4e4e4',
  strokeWidth: 3,
  //easing: 'bounce',
  trailWidth: 3,
  duration: 1500,
  text: {
    value: '0'
  },
  step: function(state, progressPercentage) {
    percent.innerHTML = "" +  (progressPercentage.value() * 100).toFixed(0) + "";
  }
});

progressPercentage.animate(.75, function() {
  //progressPercentage.animate(0);
});

scripts

<script src="https://cdn.rawgit.com/kimmobrunfeldt/progressbar.js/0.5.6/dist/progressbar.js"></script>

style.css

.progress-js,
.progressPercentage{
  width: 200px;
  height: 200px;
  position: relative;
  margin-bottom: 20px;
}

.progressPercentage p{
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 24px;
  margin: 0;
  padding: 0;
  transform: translate(-50%, -50%);
}