html 页面没有加载完成前调用动画,分享一段页面加载完成前的SVG动画，纯代码实现！...

很多时候我们希望一个页面所有内容加载完成才展示出页面，逻辑很简单，就是给一个loader元素，页面加载完成使用window.load函数隐藏或者去掉loader元素，下面给大家分享一段纯代码打造的svg加载动画，建议移动端使用，因为svg动画对于pc浏览器兼容性不是太好，特别是ie，大家都懂的！

下面贴上代码，首先在body开始位置加入以下代码：

.loader {position: fixed;top: 0;left: 0;right: 0;bottom:0;z-index: 99999;text-align: center;background:url(img/load_bg.png) #fff no-repeat center;background-size: cover }

.loader div{display: inline-block;color:#bca29b }

.loader svg path,.loadersvg rect {fill: #bca29b;}

资源加载中...

然后在页面底部加入加载事件即可

$(window).load(function (){$(".loader").remove() });