HTML implementation of progress bar

Set the picture style, place the progress bar picture in the images/ directory, and name it loading.gif. Among them, the gif loading image can be generated at https://icons8.com/preloaders/ , as shown in the figure below.

Add a style file to the head so that the image is in the center of the screen.

<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>

Add a div tag to the body to display images.

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

Determine the current loading status through document.readyState in the document.onreadystatechange event.

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

Among them, document.readyState has four states.

uninitialized	Loading not started
loading	loading
interactive	The document is loaded, but resources such as images and styles may still be loading. At this point the document can already interact with the user
complete	Complete loading