CODEWITHSUNDEEP
javascriptjquerycssprogress-bar
DeanH
DeanH

Reputation: 523

Change a value over a set amount of time with jQuery?

I'm working on a project that calls for a circular progress bar. I found one that will do the trick here:

http://codepen.io/shankarcabus/pen/GzAfb

But what I need to do is animate it on page load so that it will go up in value each time:

<div class="progress-pie-chart" data-percent="43">

So on "page1.htm", I need the data-percent value to automatically increase incrementally from 0-20. On "page2.htm" from 20-33, etc. I'm pretty new to jQuery, so I honestly have no idea where to begin on that.

How do I create a function that will increase the data-percent value over say, 500 milliseconds?

Upvotes: 0

Views: 1445

Answers (1)

Downgoat
Downgoat

Reputation: 14361

Using a setInterval we can produce something like. We also use some math to calculate the steps based on the fps to create a smooth animation. Decimals can also be used for the percent 

var start = 0;
var end = 30;
var time = 800; //in ms
var fps = 30;

var increment = ((end-start)/time)*fps;

$('.progress-pie-chart')[0].dataset.percent = start;

var timer = setInterval(function() {
  $('.progress-pie-chart')[0].dataset.percent = parseFloat($('.progress-pie-chart')[0].dataset.percent) + increment;

  if (parseFloat($('.progress-pie-chart')[0].dataset.percent) >= end) {
    clearInterval(timer);
  }

  var $ppc = $('.progress-pie-chart'),
    percent = parseFloat($ppc[0].dataset.percent),
    deg = 360 * percent / 100;

  if (percent > 50) {
    $ppc.addClass('gt-50');
  }
  $('.ppc-progress-fill').css('transform', 'rotate(' + deg + 'deg)');
  $('.ppc-percents span').html(parseInt(percent, 10) + '%');
}, fps);
.progress-pie-chart {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: #E5E5E5;
  position: relative;
}
.progress-pie-chart.gt-50 {
  background-color: #81CE97;
}
.ppc-progress {
  content: "";
  position: absolute;
  border-radius: 50%;
  left: calc(50% - 100px);
  top: calc(50% - 100px);
  width: 200px;
  height: 200px;
  clip: rect(0, 200px, 200px, 100px);
}
.ppc-progress .ppc-progress-fill {
  content: "";
  position: absolute;
  border-radius: 50%;
  left: calc(50% - 100px);
  top: calc(50% - 100px);
  width: 200px;
  height: 200px;
  clip: rect(0, 100px, 200px, 0);
  background: #81CE97;
  transform: rotate(60deg);
}
.gt-50 .ppc-progress {
  clip: rect(0, 100px, 200px, 0);
}
.gt-50 .ppc-progress .ppc-progress-fill {
  clip: rect(0, 200px, 200px, 100px);
  background: #E5E5E5;
}
.ppc-percents {
  content: "";
  position: absolute;
  border-radius: 50%;
  left: calc(50% - 173.91304px/2);
  top: calc(50% - 173.91304px/2);
  width: 173.91304px;
  height: 173.91304px;
  background: #fff;
  text-align: center;
  display: table;
}
.ppc-percents span {
  display: block;
  font-size: 2.6em;
  font-weight: bold;
  color: #81CE97;
}
.pcc-percents-wrapper {
  display: table-cell;
  vertical-align: middle;
}
body {
  font-family: Arial;
  background: #f7f7f7;
}
.progress-pie-chart {
  margin: 50px auto 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="progress-pie-chart" data-percent="0">
  <div class="ppc-progress">
    <div class="ppc-progress-fill"></div>
  </div>
  <div class="ppc-percents">
    <div class="pcc-percents-wrapper">
      <span>%</span>
    </div>
  </div>
</div>

Upvotes: 2

Related Questions