CSS假的进度条loading效果实例页面

回到相关文章 »

效果：

加载进度：

代码：

CSS代码：

.progress {
    height: 12px; width: 300px;
    background-color: #f0f2f3;
}
.progress::before {
    content: '';
    display: block;
    width: 0;
    height: 100%;
    background-color: #2486ff;
}
.progress.active::before {
    transition: 100s width cubic-bezier(.08,.81,.29,.99);
    width: 100%;    
}

HTML代码：

加载进度： <div class="progress"></div>

<button id="button">开始加载</button>

JS代码：

var progress = document.querySelector('.progress');
button.onclick = function () {
    progress.classList.remove('active');
    progress.offsetHeight;
    progress.classList.add('active');
};