Ой, html стилями менять не выйдет, не внимательно посмотрел.
<div style="background: green; width: 0%">0%</div>
<script>
var animate = function (options) {
var start = Date.now(); // сохранить время начала
requestAnimationFrame(function tick() {
var timePassed = Date.now() - start;
var progress = timePassed / options.duration;
var timeFunction = options.timeFunction || function (progress) {
return progress;
};
progress = progress > 1 ? 1 : progress;
options.step(timeFunction(progress));
if (progress === 1) {
options.complete();
} else {
requestAnimationFrame(tick);
}
});
};
var div = document.querySelector('div');
animate({
duration: 5000,
step: function (progress) {
var percent = Math.round(75 * progress) + '%';
div.innerHTML = percent;
div.style.width = 75 * progress + '%';
},
complete: function () {}
});
</script>