Показать сообщение отдельно
  #10 (permalink)  
Старый 15.12.2015, 15:34
Профессор
Отправить личное сообщение для tsigel Посмотреть профиль Найти все сообщения от tsigel
 
Регистрация: 12.12.2012
Сообщений: 1,398

Ой, 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>
Ответить с цитированием