Quiero reproducir animación, cuando el navegador está cargando scripts y otros activos de Angular 5.

Por ejemplo, esta animación SVG:

<?xml version="1.0" standalone="no"?>
<!-- Generator: SVG Circus (http://svgcircus.com) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg id="SVG-Circus-fd09094d-ef46-ec99-9c7e-2ce68491a50b" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet"><rect id="actor_8" x="30" y="45" width="10" height="10" opacity="1" fill="rgba(242,162,12,1)" fill-opacity="1" stroke="rgba(166,3,17,1)" stroke-width="1" stroke-opacity="1" stroke-dasharray=""></rect><rect id="actor_7" x="30" y="60" width="10" height="10" opacity="1" fill="rgba(242,162,12,1)" fill-opacity="1" stroke="rgba(166,3,17,1)" stroke-width="1" stroke-opacity="1" stroke-dasharray=""></rect><rect id="actor_6" x="45" y="60" width="10" height="10" opacity="1" fill="rgba(242,162,12,1)" fill-opacity="1" stroke="rgba(166,3,17,1)" stroke-width="1" stroke-opacity="1" stroke-dasharray=""></rect><rect id="actor_5" x="60" y="60" width="10" height="10" opacity="1" fill="rgba(242,162,12,1)" fill-opacity="1" stroke="rgba(166,3,17,1)" stroke-width="1" stroke-opacity="1" stroke-dasharray=""></rect><rect id="actor_4" x="60" y="45" width="10" height="10" opacity="1" fill="rgba(242,162,12,1)" fill-opacity="1" stroke="rgba(166,3,17,1)" stroke-width="1" stroke-opacity="1" stroke-dasharray=""></rect><rect id="actor_3" x="60" y="30" width="10" height="10" opacity="1" fill="rgba(242,162,12,1)" fill-opacity="1" stroke="rgba(166,3,17,1)" stroke-width="1" stroke-opacity="1" stroke-dasharray=""></rect><rect id="actor_2" x="45" y="30" width="10" height="10" opacity="1" fill="rgba(242,162,12,1)" fill-opacity="1" stroke="rgba(166,3,17,1)" stroke-width="1" stroke-opacity="1" stroke-dasharray=""></rect><rect id="actor_1" x="30" y="30" width="10" height="10" opacity="1" fill="rgba(242,162,12,1)" fill-opacity="1" stroke="rgba(166,3,17,1)" stroke-width="1" stroke-opacity="1" stroke-dasharray=""></rect><script type="text/ecmascript"><![CDATA[(function(){var actors={};actors.actor_1={node:document.getElementById("SVG-Circus-fd09094d-ef46-ec99-9c7e-2ce68491a50b").,getElementById("actor_1"),type:"square",cx:35,cy:35,dx:10,dy:5,opacity:1};actors.actor_2={node:document.getElementById("SVG-Circus-fd09094d-ef46-ec99-9c7e-2ce68491a50b").getElementById("actor_2"),type:"square",cx:50,cy:35,dx:10,dy:5,opacity:1};actors.actor_3={node:document.getElementById("SVG-Circus-fd09094d-ef46-ec99-9c7e-2ce68491a50b").getElementById("actor_3"),type:"square",cx:65,cy:35,dx:10,dy:5,opacity:1};actors.actor_4={node:document.getElementById("SVG-Circus-fd09094d-ef46-ec99-9c7e-2ce68491a50b").getElementById("actor_4"),type:"square",cx:65,cy:50,dx:10,dy:5,opacity:1};actors.actor_5={node:document.getElementById("SVG-Circus-fd09094d-ef46-ec99-9c7e-2ce68491a50b").getElementById("actor_5"),type:"square",cx:65,cy:65,dx:10,dy:5,opacity:1};actors.actor_6={node:document.getElementById("SVG-Circus-fd09094d-ef46-ec99-9c7e-2ce68491a50b").getElementById("actor_6"),type:"square",cx:50,cy:65,dx:10,dy:5,opacity:1};actors.actor_7={node:document.getElementById("SVG-Circus-fd09094d-ef46-ec99-9c7e-2ce68491a50b").getElementById("actor_7"),type:"square",cx:35,cy:65,dx:10,dy:5,opacity:1};actors.actor_8={node:document.getElementById("SVG-Circus-fd09094d-ef46-ec99-9c7e-2ce68491a50b").getElementById("actor_8"),type:"square",cx:35,cy:50,dx:10,dy:5,opacity:1};var tricks={};tricks.trick_1=(function(t,i){i=(function(t){return Math.sqrt(1-(t-=1)*t)})(i)%1,i=0>i?1+i:i;var _=t.node;0.2>=i?_.setAttribute("opacity",i*(t.opacity/0.2)):i>=0.8?_.setAttribute("opacity",t.opacity-(i-0.8)*(t.opacity/(1-0.8))):_.setAttribute("opacity",t.opacity)});var scenarios={};scenarios.scenario_1={actors: ["actor_1","actor_2","actor_3","actor_4","actor_5","actor_6","actor_7","actor_8"],tricks: [{trick: "trick_1",start:0,end:1}],startAfter:0,duration:800,actorDelay:100,repeat:0,repeatDelay:0};var _reqAnimFrame=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||window.oRequestAnimationFrame,fnTick=function(t){var r,a,i,e,n,o,s,c,m,f,d,k,w;for(c in actors)actors[c]._tMatrix=[1,0,0,1,0,0];for(s in scenarios)for(o=scenarios[s],m=t-o.startAfter,r=0,a=o.actors.length;a>r;r++){if(i=actors[o.actors[r]],i&&i.node&&i._tMatrix)for(f=0,m>=0&&(d=o.duration+o.repeatDelay,o.repeat>0&&m>d*o.repeat&&(f=1),f+=m%d/o.duration),e=0,n=o.tricks.length;n>e;e++)k=o.tricks[e],w=(f-k.start)*(1/(k.end-k.start)),tricks[k.trick]&&tricks[k.trick](i,Math.max(0,Math.min(1,w)));m-=o.actorDelay}for(c in actors)i=actors[c],i&&i.node&&i._tMatrix&&i.node.setAttribute("transform","matrix("+i._tMatrix.join()+")");_reqAnimFrame(fnTick)};_reqAnimFrame(fnTick);})()]]></script></svg>

Puse eso entre<my-app></my-app> etiqueta. Pero cuando voy ahttp: // localhost: 4200, la animación se reproduce un poco pero luego se congela.

¿Por qué pasa eso? ¿Cómo puedo usar SVG para cargar el indicador en la pantalla de carga inicial?

P.S Si uso la animación HTML + CSS, funciona correctamente y la animación se reproduce durante la carga de activos y scripts.