Angular freeze SVG animation on boot screen
I want to play animation when the browser loads scripts and other Angular 5 resources.
For example, this SVG animation:
<?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>
I put this in between <my-app></my-app>
. But when I go to http: // localhost: 4200 the animation plays a little but then stops.
Why is this happening? How can I use SVG to load an indicator on the initial loading screen?
PS If I use HTML + CSS animation, it works correctly and the animation plays while resources and scripts are loaded.
0
source to share