将此文件插入到文件中

loading.html

<style> .load{ width: 100%; height: 100vh; position: fixed; top: 0; z-index: 10000; //display: none; background-color: rgba(0, 0, 0, 0.1); } .loader{ width: 140px; height: 140px; /* border: 1px solid red; */ text-align: center; position: absolute; top: calc(50% - 70px); left: calc(50% - 70px); padding-top: 15px; background-color: rgba(0, 0, 0, 0.5); border-radius: 5px; } #loader-1{ width: 60px; height: 60px; } .load-msg{ height: 50px; line-height: 50px; color: #fff; font-size: 13px; /* margin-top: 20px; */ } svg path, svg rect { fill: #17a085; } </style> <div class="loader" title="2"> <svg version="1.1" id="loader-1" x="0px" y="0px" width="100px" height="100px" viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve"> <path fill="#000" d="M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z"> <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="0.6s" repeatCount="indefinite" /> </path> </svg> <div class="load-msg"> 加载中,请稍后....</div> </div>

使用：

<div id="page1"> </div> <script> // 场景1 页面加载的时候使用loading $("#page1").load('js/loading.html') //加载 $("#page1").fadeOut(400); //消失 // 场景2 请求后端接口的时候loading $("#page1").fadeIn(400) $("#page1").fadeOut(400); </script>

---

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。