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  }
  • 相关阅读:
    关于android listview去掉分割线
    关于android在Service中弹出Dialog对话框
    Java SimpleDateFormat 函数
    关于Android使TextView可以滚动的设置
    关于Android(Java)创建匿名线程
    关于解决 Failed to prepare partial IU:
    毕业设计进度:2月4日
    毕业设计进度:2月3日
    毕业设计进度:2月2日
    毕业设计进度:2月1日
  • 原文地址:https://www.cnblogs.com/abc-x/p/9284823.html
Copyright © 2011-2022 走看看