Home >Web Front-end >JS Tutorial >JS simple web page progress bar implementation code

JS simple web page progress bar implementation code

小云云Original: 2018-02-28 11:52:401063browse

This article mainly shares with you the implementation code of JS simple web page progress bar, hoping to help everyone.

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>jquery实现简单网页进度条</title>
   <style>
       * {
           margin: 0;
           padding: 0;
       }
       /*大小和body一样,盖住全部内容*/
       .loading {
           width: 100%;
           height: 100%;
           background: #fff;
           position: fixed;
           top: 0;
           left: 0;
           z-index: 999;
       }
       /*图片和父容器大小一样*/
       img {
           width: 100%;
       }
       /*加载动画*/
       .loading .pic {
           width: 200px;
           height: 100px;
           background: url(img/07.gif) no-repeat center;
           /* 大家可以去www.loading.io浏览一下，里面提供了很多进度条小动画 */
           position: absolute;
           top: 0;
           left: 0;
           right: 0;
           bottom: 0;
           margin: auto;
       }
   </style>
</head>
<body>
   <p class="loading">
       <p class="pic"></p>
   </p>
       
   <!-- 页面加载完成后要展示的图片 -->
   <img src="01.jpg" alt="">
   <img src="02.jpg" alt="">
   <img src="06.jpg" alt="">
</body>
<script>
 /*  
   通过加载事件来完成网页加载事件
       onreadystatechange:页面加载状态改变时的状态
       document.readyState：返回当前文档的状态
       
       1.uninitialized - 还未开始加载
       2.loading       - 载入中
       3.interactive   - 已加载， 文档与用户可以开始交互
       4.complete      - 载入完成
   */
   document.onreadystatechange = function () {
       if (document.readyState == "complete") { //判断状态
           $(".loading").fadeOut();
       }
   }
   
</script>
</html>

Related recommendations:

JS writing instance method of web page progress bar

A simple implementation method of web page progress bar

The above is the detailed content of JS simple web page progress bar implementation code. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：JS implementation of obtaining time and setting countdown code sharingNext article：JS implementation of obtaining time and setting countdown code sharing

See more

JS simple web page progress bar implementation code

Related articles