注意:如果代码运行样式不对,请不要取消代码换行~
样式一:
只需要在header的头部加入以下代码,可根据实际需求修改:
<script type="text/javascript"> var _LoadingHtml = '<div id="loadingDiv" style="position:fixed;top:0;left:0; width:100%;height:100%;background:rgba(0,0,0,0.5);z-index:999;"><img src="{MODULE_URL} template/mobile/images/loading.gif" style="position:fixed;right:40%;top:40%;width:84px; height:84px;z-index:5;"/></div>'; document.write(_LoadingHtml); document.onreadystatechange = completeLoading; function completeLoading() { if (document.readyState == "complete") { var loadingMask = document.getElementById('loadingDiv'); loadingMask.parentNode.removeChild(loadingMask); } } </script>
样式二:
<style type="text/css"> /* 页面loading */ #spinners {position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.6);z-index:9999;} .spinner {margin: 50% 30%;width: 40%;text-align: center;} .spinner > div {width: 30px;height: 30px;background-color: #67CF22;border-radius: 100%;display: inline-block; -webkit-animation: bouncedelay 1.4s infinite ease-in-out;animation: bouncedelay 1.4s infinite ease-in-out; -webkit-animation-fill-mode: both;animation-fill-mode: both;} .spinner .bounce1 {-webkit-animation-delay: -0.32s;animation-delay: -0.32s;} .spinner .bounce2 {-webkit-animation-delay: -0.16s;animation-delay: -0.16s;} @-webkit-keyframes bouncedelay {0%, 80%, 100% { -webkit-transform: scale(0.0) }40% { -webkit-transform: scale(1.0)}} @keyframes bouncedelay {0%, 80%, 100% {transform: scale(0.0);-webkit-transform: scale(0.0);} 40% {transform: scale(1.0);-webkit-transform: scale(1.0);}} </style> <div id="spinners"> <div class="spinner"> <div class="bounce1"></div> <div class="bounce2"></div> <div class="bounce3"></div> </div> </div>
转载请注明: haoshu发表于浩叔逛逛>>https://www.haoshu888.com/js/1079.html