CSS实现带百分比数字的假loading效果实例页面

效果：

加载进度：

代码：

CSS代码：

@property --percent { 
    syntax: '<integer>';
    inherits: false;
    initial-value: 0;
}
.progress {
    width: 300px;
    line-height: 20px;
    background-color: #f0f2f3;
}
.progress::before {
    --percent: 0;
    counter-reset: progress var(--percent);
    content: counter(progress) '%\2002';
    display: block;
    width: calc(300px * var(--percent) / 100);
    font-size: 12px;
    color: #fff;
    background-color: #2486ff;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    transition: none;
}
.progress.active::before {
    --percent: 99;
    transition: 100s --percent cubic-bezier(.08,.81,.29,.99);    
}

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');
};