使用JavaScript實現在頁面上所有內容加載完之前一直顯示loading...頁面
阿新 • • 發佈：2018-07-09
back pro webkit index tro ear keyframes nload radius
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%; 4top: 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 width: 2em; 27 height: 2em; 28 } 29 30 .curtain { 31 position: fixed; 32 width: 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 }
使用JavaScript實現在頁面上所有內容加載完之前一直顯示loading...頁面