網頁載入動畫 > 效果地址：[http://www.hema.work/661960.html](http://www.hema.work/661960.html) 1.插入css代碼 ```css <style> .loading-bg{ width: 100vw; height: 100vh; position: fixed; left: 0; top: 0; background: #FFFFFF; z-index: 500; } .loading{ width: 350px; height: 150px; position: fixed; left: 50%; top: 50%; margin-left: -152.5px; margin-top: -27.5px; background: #FFFFFF url(http://bk.image.styleweb.com.cn/2019/3/18/2071_jte0hqkv.png) no-repeat; border: 15px solid #FFFFFF; z-index: 500; transition: all 0.5s cubic-bezier(0.25, 0, 0, 1); -webkit-transition: all 0.5s cubic-bezier(0.25, 0, 0, 1); /* box-shadow: 0px 0px 20px rgba(0, 0, 0, .2); */ } .loading span{ width: 0%; height: 100%; position: absolute; left: 0px; top: 0px; -webkit-transition-duration: 0.5s; background: url(http://bk.image.styleweb.com.cn/2019/3/18/2071_jte0ffj4.png) no-repeat; content: ''; } .loading-bg.active{ opacity: 0; visibility: hidden; } .loading::before{display:?none;} </style> ``` 2.插入JQ代碼 ```javascript <script> var haier = { percent: 0, timers: "", loading: function () { $("body").append("<div class='loading-bg'><div class='loading'><span></span></div></div>") haier.timers = setInterval(function () { haier.percent = ++haier.percent >= 99 ? 99 : haier.percent; $(".loading span").css({ width: haier.percent + "%" }) }, 10) }, /** * 首頁 */ home: function () { $(".loading span").css({ width: 100 + "%" }) clearInterval(haier.timers); setTimeout(function () { $(".loading-bg").addClass("active") }, 1000) }, } </script> ``` 3.插入至網站底部代碼中 ```javascript <script> haier.loading(); window.onload = function(){ haier.home(); } </script> ```