JavaScript 常用进度条

Posted 2020-10-10 圈地自萌

1. 通过加载状态事件制作进度条：

知识点：

　　 document.onreadystatechange //页面加载状态改变时的事件
    document.readyState  //返回当前文档的状态
    uninitialized - 还未开始载入
    loading - 载入中
    interactive - 已加载，文档与用户可以开始交互
    complete - 载入完成

document.onreadystatechange = function () {
        console.log(document.readyState);
    }

查看网页控制台，可以看出，已经返回当前文档的状态：

常见的加载进度条，如果不需要显示加载加载进度百分比，那么，直接执行一个进度条动画消失的任务即可：

 document.onreadystatechange = function () {
        if(document.readyState === "complete"){
            //....要执行的任务，比如进度条动画结束fadeOut:
            $(\'.loading\').fadeOut();
        }
    }

 

 推荐一个一不小心就会沉迷在里面的网站：https://loading.io/   可在这里挑选进度条小动画，还有纯html+css写成的进度条动画。