分享一段页面加载完成前的SVG动画，纯代码实现！

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

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

<style type="text/css">
.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;}
	</style>
<div class="loader v-center">
  <div>
  	<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="30px" viewBox="0 0 24 30"  xml:space="preserve">
    <rect x="0" y="8.24241" width="4" height="14.5152" fill="#bca29b">
      <animate attributeName="height" attributeType="XML" values="5;21;5" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>
      <animate attributeName="y" attributeType="XML" values="13; 5; 13" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>
    </rect>
    <rect x="10" y="12.2424" width="4" height="6.51518" fill="#bca29b">
      <animate attributeName="height" attributeType="XML" values="5;21;5" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>
      <animate attributeName="y" attributeType="XML" values="13; 5; 13" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>
    </rect>
    <rect x="20" y="9.75759" width="4" height="11.4848" fill="#bca29b">
      <animate attributeName="height" attributeType="XML" values="5;21;5" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>
      <animate attributeName="y" attributeType="XML" values="13; 5; 13" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>
    </rect>
  </svg>
  <p>资源加载中...</p>
  </div>
</div>

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

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