zoukankan      html  css  js  c++  java
  • 使用JavaScript实现在页面上所有内容加载完之前一直显示loading...页面

    Html

     1 <body  class="is-loading">
     2 <div class="curtain">
     3     <div class="loader">
     4         loading...
     5     </div>
     6 </div> 
     7  <div>
     8    <!--这里 正文 -->
     9 </div>  
    10 </body>

    Css

     1 .loader {
     2     position: fixed;
     3     left: 50%;
     4     top: 50%;
     5     margin: -0.2em 0 0 -0.2em;
     6     text-indent: -9999em;
     7     border-top: 0.3em solid rgba(0, 0, 0, 0.1);
     8     border-right: 0.3em solid rgba(0, 0, 0, 0.1);
     9     border-bottom: 0.3em solid rgba(0, 0, 0, 0.1);
    10     border-left: 0.3em solid #555;
    11     -moz-transform: translateZ(0);
    12     -webkit-transform: translateZ(0);
    13     transform: translateZ(0);
    14     -moz-animation: loader 300ms infinite linear;
    15     -webkit-animation: loader 300ms infinite linear;
    16     animation: loader 300ms infinite linear;
    17     -moz-transition: all 500ms ease;
    18     -o-transition: all 500ms ease;
    19     -webkit-transition: all 500ms ease;
    20     transition: all 500ms ease;
    21 }
    22 
    23 .loader,
    24 .loader:after {
    25     border-radius: 50%;
    26      2em;
    27     height: 2em;
    28 }
    29 
    30 .curtain {
    31     position: fixed;
    32      100%;
    33     height: 100%;
    34     top: 0;
    35     left: 0;
    36     background-color: white;
    37     -moz-transition: all 600ms ease;
    38     -o-transition: all 600ms ease;
    39     -webkit-transition: all 600ms ease;
    40     transition: all 600ms ease;
    41     filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    42     opacity: 0;
    43     z-index: 0;
    44     overflow: hidden;
    45 }
    46 
    47 @-webkit-keyframes loader {
    48     0% {
    49         -webkit-transform: rotate(0deg);
    50         transform: rotate(0deg);
    51     }
    52     100% {
    53         -webkit-transform: rotate(360deg);
    54         transform: rotate(360deg);
    55     }
    56 }
    57 
    58 @-moz-keyframes loader {
    59     0% {
    60         -moz-transform: rotate(0deg);
    61         transform: rotate(0deg);
    62     }
    63     100% {
    64         -moz-transform: rotate(360deg);
    65         transform: rotate(360deg);
    66     }
    67 }
    68 
    69 @keyframes loader {
    70     0% {
    71         -webkit-transform: rotate(0deg);
    72         transform: rotate(0deg);
    73     }
    74     100% {
    75         -webkit-transform: rotate(360deg);
    76         transform: rotate(360deg);
    77     }
    78 }
    79 
    80 .is-loading {
    81     overflow: hidden;
    82 }
    83 
    84 .is-loading .curtain {
    85     filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
    86     opacity: 1;
    87     z-index: 99;
    88 }
    89 
    90 .is-loading .loader {
    91     filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
    92     opacity: 1;
    93 }

    Js

    1  window.onload=function(){
    2   
    3      $('body').removeClass('is-loading');  
    4  }
  • 相关阅读:
    hdu 1042 N!
    hdu 1002 A + B Problem II
    c++大数模板
    hdu 1004 Let the Balloon Rise
    hdu 4027 Can you answer these queries?
    poj 2823 Sliding Window
    hdu 3074 Multiply game
    hdu 1394 Minimum Inversion Number
    hdu 5199 Gunner
    九度oj 1521 二叉树的镜像
  • 原文地址:https://www.cnblogs.com/abc-x/p/9284823.html
Copyright © 2011-2022 走看看