HTML实现进度条

设置图片样式，将进度条图片放在images/目录下，命名为loading.gif。其中，gif加载图片可以在https://icons8.com/preloaders/中生成，如下图所示。

在head中添加样式文件，让图片处于屏幕中心位置。

<style>
    .loading{width:100%;height:100%;position:fixed;top:0;left:0;z-index:100;background:#ffffff;opacity:0.5;}
    .loading .pic{width:64px;height:64px;background:url(images/loading.gif);position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;}
</style>

在body中添加div标签，用于显示图片。

<div class="loading">
    <div class="pic"></div>
</div>

在document.onreadystatechange事件中通过document.readyState判断当前加载状态。

<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script>
    document.onreadystatechange=function(){
        if(document.readyState=="complete"){
            $(".loading").fadeOut();
        }
    }
</script>

其中，document.readyState共有四种状态。

uninitialized	未开始加载
loading	正在加载
interactive	文档加载完成，但图片和样式等资源可能仍在加载。此时文档已经可以和用户交互
complete	完成加载