requestAnimationFrame动画

利用requestAnimationFrame实现一个进度条动画

• html

<div class="progress">0%</div>

• css

.progress{
    background: rgba(80, 175, 255, 0.5);
    width: 0;
    height: 20px;
}

• javascript

const progressEle = document.querySelector('.progress');
let progress = 0;
function step() {
    progress +=10;
    progressEle.style.width = progress + 'px';
    progressEle.innerHTML = progress/10 + '%';
    if(progress < 1000){
        requestAnimationFrame(step);
    }
}
requestAnimationFrame(step);