动画svg加载器

Question

我在这个网站http://www.potockipaterson.co.nz/上有一个动画svg页面加载器，但动画不会运行，直到页面实际加载并且叠加层淡出但显然我希望它立即运行

    <script>
        $(window).load(function(){
            $('#loader').fadeOut('slow');
        });
    </script> 

    <div id="loader">
        <div class="greeting">
            <h1>WELCOME</h1>
            <p>one moment please....</p>
            <svg class="timer" version="1.1" id="L2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
              viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
            <circle fill="none" stroke="#fff" stroke-width="4" stroke-miterlimit="10" cx="50" cy="50" r="48"/>
            <line fill="none" stroke-linecap="round" stroke="#fff" stroke-width="4" stroke-miterlimit="10" x1="50" y1="50" x2="85" y2="50.5">
              <animateTransform 
                   attributeName="transform" 
                   dur="2s"
                   type="rotate"
                   from="0 50 50"
                   to="360 50 50"
                   repeatCount="indefinite" />
            </line>
            <line fill="none" stroke-linecap="round" stroke="#fff" stroke-width="4" stroke-miterlimit="10" x1="50" y1="50" x2="49.5" y2="74">
              <animateTransform 
                   attributeName="transform" 
                   dur="15s"
                   type="rotate"
                   from="0 50 50"
                   to="360 50 50"
                   repeatCount="indefinite" />
            </line>
            </svg>
        </div>
    </div>