SVG hover animation glitch issue - animation

I'm trying to activate this animation on hover which is working! but it's glitchy every-time the mouse is moved it fires again. Is there a solution to this issue? also is there a way to force the animation to finish after mouseout?
<svg id="squid" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
x="0px" y="0px" width="180px" height="192.8px" viewBox="0 0 130 225"
xml:space="preserve" preserveAspectRatio="xMidyMax meet">
<defs>
</defs>
<g class="squid">
<path id="left-arm" class="left-arm" d="M6,20.8c0,0,21.3,0,21.3,21.2c0,21.2-20.8,18.4-20.8,41.4c0,22.6,36.7,34.4,52.9-8.9"/>
<path id="right-arm" class="right-arm" d="M122,20.8c0,0-21.3,0-21.3,21.2c0,21.2,20.8,18.4,20.8,41.4c0,22.6-36.7,34.4-52.8-8.9"/>
<path id="lightning" class="lightning" d="M65.2,43.7L67.7,56l3.1,15.9L63.4,56L52.9,33.2l9.9-0.4l-5-27.6l17.3,38L65.2,43.7z"/>
<path id="left-mid-arm" class="left-mid-arm" d="M58.5,99.6c-31.1,25.5-50,28.7-50,50.8c0,15.8,10.2,22.9,16,26.6"/>
<path id="right-mid-arm" class="right-mid-arm" d="M69.7,99.6c31.1,25.5,50,28.7,50,50.8c0,15.8-10.2,22.9-16,26.6"/>
<g id="right-limb">
<path id="right-leg" class="right-leg" d="M63.2,107.6c0,0,6.3-0.1,10.3,7.6c1.6,3.1,2.4,6.4,2.3,10.2c-0.1,2.7-0.6,6.1-0.6,6.1"/>
<path id="right-foot" class="right-foot" d="M51.5,156.9c-2.3,3-3.7,6.7-3.7,11.9c0,5.1,1.4,8.8,3.1,11.5"/>
</g>
<path id="left-leg" class="left-leg" d="M63.8,107.6c0,0-14.3,0.3-11.6,20.6c2.8,20.8,27.9,19,27.9,40.6c0,14.6-11.2,18-11.2,18"/>
<g class="body">
<path id="body" d="M84.7,62.6c0.1-0.1,5.1-1.5,5-5.1V5c0-2.8-2.2-5-5-5h-42c-2.8,0-5,2.2-5,5v52.4c0,2.4,1.7,4.4,3.9,4.9
c0.2,0,1.1,0.2,1.2,0.3c2,0.8,3.5,2.7,3.5,5c0,2.2-1.4,4.1-3.3,4.9c-0.1,0.1-5.4,1.2-5.3,5.3v0.4c0,2.8,2.2,5,5,5h1.5
c2.2,0,7.3,2.2,8.6,4.2c-1.1,1.9-1.7,4-1.7,6.4c0,6.9,5.6,12.5,12.5,12.5S76,100.6,76,93.7c0-2.2-0.5-4.2-1.5-6
c3.1-2.2,7.6-4.5,8.8-4.5h1.4c2.8,0,5-2.2,5-5v-0.4c0-4.5-5.1-5.2-5.2-5.3c-2-0.8-3.4-2.7-3.4-5C81.1,65.3,82.6,63.3,84.7,62.6z"/>
</g>
<path id="lightning" class="lightning" d="M65.2,43.7L67.7,56l3.1,15.9L63.4,56L52.9,33.2l9.9-0.4l-5-27.6l17.3,38L65.2,43.7z"/>
<animate
xlink:href="#left-arm"
attributeName="d"
dur="1s"
begin="squid.mouseover"
end="squid.mouseout"
repeatCount="indefinite"
values="
M6,20.8c0,0,21.3,0,21.3,21.2c0,21.2-20.8,18.4-20.8,41.4c0,22.6,36.7,34.4,52.9-8.9;
M20,50.1c0,0,2.8-5.8-6.5,13.3c-12.6,25.9-40.3,64-15,78c20.2,11.2,41-11.5,57.1-54.9;
M-2,140.2c0,0,0,0-4.2,4.4c-5.2,5.5-21.2,30.8-0.2,40.5c27.9,12.8,46.2-59.2,62.3-102.5;
M6,216.7c0,0,0-1.3,0-5.4c0-5.7,0-1.7,0-11.4C6,146,46.2,124.7,62.4,81.3;
M10,216.7c0,0,0-1.3,0-5.4c0-5.7,0-1.7,0-11.4C6,146,46.2,124.7,62.4,81.3;
M6,216.7c0,0,0-1.3,0-5.4c0-5.7,0-1.7,0-11.4C6,146,46.2,124.7,62.4,81.3;
M-2,140.2c0,0,0,0-4.2,4.4c-5.2,5.5-21.2,30.8-0.2,40.5c27.9,12.8,46.2-59.2,62.3-102.5;
M20,50.1c0,0,2.8-5.8-6.5,13.3c-12.6,25.9-40.3,64-15,78c20.2,11.2,41-11.5,57.1-54.9;
M6,20.8c0,0,21.3,0,21.3,21.2c0,21.2-20.8,18.4-20.8,41.4c0,22.6,36.7,34.4,52.9-8.9;
Z;"/>
<animate
xlink:href="#left-mid-arm"
attributeName="d"
dur="1s"
begin="squid.mouseover"
end="squid.mouseout"
repeatCount="indefinite"
values="
M58.5,99.6c-31.1,25.5-50,28.7-50,50.8c0,15.8,10.2,22.9,16,26.6;
M58.6,98.4c-21.2,26-37.6,7-50,25.4c-9.7,14.5,10.2,22.9,16,26.6;
M61.5,106.4c-31.1,25.5-33,56.3-33,78.4c0,15.8,0,5.1,0,15.8;
M64.5,106.4c-31.1,25.5-33,56.3-33,78.4c0,15.8,0,5.1,0,15.8;
M61.5,106.4c-31.1,25.5-33,56.3-33,78.4c0,15.8,0,5.1,0,15.8;
M58.6,98.4c-21.2,26-37.6,7-50,25.4c-9.7,14.5,10.2,22.9,16,26.6;
M58.5,99.6c-31.1,25.5-50,28.7-50,50.8c0,15.8,10.2,22.9,16,26.6;
Z;"/>
<animate
xlink:href="#right-mid-arm"
attributeName="d"
dur="1s"
begin="squid.mouseover"
end="squid.mouseout"
repeatCount="indefinite"
values="
M69.7,99.6c31.1,25.5,50,28.7,50,50.8c0,15.8-10.2,22.9-16,26.6;
M69.7,98.4c21.2,26,37.6,7,50,25.4c9.7,14.5-10.2,22.9-16,26.6;
M68,106.4c31.1,25.5,33,56.3,33,78.4c0,15.8,0,5.1,0,15.8;
M64,106.4c31.1,25.5,33,56.3,33,78.4c0,15.8,0,5.1,0,15.8;
M68,106.4c31.1,25.5,33,56.3,33,78.4c0,15.8,0,5.1,0,15.8;
M69.7,98.4c21.2,26,37.6,7,50,25.4c9.7,14.5-10.2,22.9-16,26.6;
M69.7,99.6c31.1,25.5,50,28.7,50,50.8c0,15.8-10.2,22.9-16,26.6;
Z;"/>
<animate
xlink:href="#right-arm"
attributeName="d"
dur="1s"
begin="squid.mouseover"
end="squid.mouseout"
repeatCount="indefinite"
values="
M122,20.8c0,0-21.3,0-21.3,21.2c0,21.2,20.8,18.4,20.8,41.4c0,22.6-36.7,34.4-52.8-8.9;
M105.9,50.4c0,0-2.3-3.1,10.4,14c12.7,17,44.3,62.7,22,78.3c-22.7,16-50.5-11.9-66.6-55.2;
M128,140.2c0,0,0,0,4.2,4.4c5.2,5.5,21.2,30.8,0.2,40.5c-27.9,12.8-46.2-59.2-62.3-102.5;
M124,216.7c0,0,0-1.3,0-5.4c0-5.7,0-1.7,0-11.4c0-53.9-40.2-75.2-56.3-118.5;
M120,216.7c0,0,0-1.3,0-5.4c0-5.7,0-1.7,0-11.4c0-53.9-40.2-75.2-56.3-118.5;
M124,216.7c0,0,0-1.3,0-5.4c0-5.7,0-1.7,0-11.4c0-53.9-40.2-75.2-56.3-118.5;
M128,140.2c0,0,0,0,4.2,4.4c5.2,5.5,21.2,30.8,0.2,40.5c-27.9,12.8-46.2-59.2-62.3-102.5;
M105.9,50.4c0,0-2.3-3.1,10.4,14c12.7,17,44.3,62.7,22,78.3c-22.7,16-50.5-11.9-66.6-55.2;
M122,20.8c0,0-21.3,0-21.3,21.2c0,21.2,20.8,18.4,20.8,41.4c0,22.6-36.7,34.4-52.8-8.9;
Z;"/>
<animate
xlink:href="#right-leg"
attributeName="d"
dur="1s"
begin="squid.mouseover"
end="squid.mouseout"
repeatCount="indefinite"
values="
M68.5,108.9c4,2.5,8.9,8.6,7.2,21.3c-0.1,0.4-0.1,0.8-0.2,1.2;
M68.5,105.9c4,2.5,7.2,3.5,7.2,16.3c0,2.2-0.4,4-1.2,5.8;
M68.5,105.7c4,2.5,7.2,8.5,7.2,21.3c0,2-0.1,3.7-0.4,5.1;
M68.5,105.9c4,2.5,7.2,3.5,7.2,16.3c0,2.2-0.4,4-1.2,5.8;
M68.5,108.9c4,2.5,8.9,8.6,7.2,21.3c-0.1,0.4-0.1,0.8-0.2,1.2;
Z;"/>
<animate
xlink:href="#right-foot"
attributeName="d"
dur="1s"
begin="squid.mouseover"
end="squid.mouseout"
repeatCount="indefinite"
values="
M51.5,156.9c-2.3,3-3.7,6.7-3.7,11.9c0,5.1,1.4,8.8,3.1,11.5;
M48,156.9c0,5.9,0,3,0,4.9c0,3.9,0,2.8,0,3.9;
M52.5,156.9c0,5.9,0,3,0,4.9c0,3.9,0,2.8,0,3.9;
M48,156.9c0,5.9,0,3,0,4.9c0,3.9,0,2.8,0,3.9;
M51.5,156.9c-2.3,3-3.7,6.7-3.7,11.9c0,5.1,1.4,8.8,3.1,11.5;
Z;"/>
<animate
xlink:href="#left-leg"
attributeName="d"
dur="1s"
begin="squid.mouseover"
end="squid.mouseout"
repeatCount="indefinite"
values="
M63.8,107.6c0,0-14.3,0.3-11.6,20.6c2.8,20.8,27.9,19,27.9,40.6c0,14.6-11.2,18-11.2,18;
M63.9,114.4c0,0,3-0.6,10.2,18.5c6,16.1,6,30.2,6,40.2c0,4,0,10.3,0,10.3;
M60.9,114.4c0,0,3-0.6,10.2,18.5c6,16.1,6,30.2,6,40.2c0,4,0,10.3,0,10.3;
M63.9,114.4c0,0,3-0.6,10.2,18.5c6,16.1,6,30.2,6,40.2c0,4,0,10.3,0,10.3;
M63.8,107.6c0,0-14.3,0.3-11.6,20.6c2.8,20.8,27.9,19,27.9,40.6c0,14.6-11.2,18-11.2,18;
Z;"/>
<animate
xlink:href="#right-leg"
attributeName="d"
dur="1s"
begin="squid.mouseover"
end="squid.mouseout"
repeatCount="indefinite"
values="
M63.2,107.6c0,0,6.3-0.1,10.3,7.6c1.6,3.1,2.4,6.4,2.3,10.2c-0.1,2.7-0.6,6.1-0.6,6.1;
M68.2,107.6c0,0,14.3,0.3,11.6,20.6c-2.8,20.8-27.9,19-27.9,40.6c0,14.6,11.2,18,11.2,18;
M64.7,114.4c0,0-3-0.6-10.2,18.5c-6,16.1-6,30.2-6,40.2c0,4,0,10.3,0,10.3;
M68.7,114.4c0,0-3-0.6-10.2,18.5c-6,16.1-6,30.2-6,40.2c0,4,0,10.3,0,10.3;
M64.7,114.4c0,0-3-0.6-10.2,18.5c-6,16.1-6,30.2-6,40.2c0,4,0,10.3,0,10.3;
M68.2,107.6c0,0,14.3,0.3,11.6,20.6c-2.8,20.8-27.9,19-27.9,40.6c0,14.6,11.2,18,11.2,18;
M63.2,107.6c0,0,6.3-0.1,10.3,7.6c1.6,3.1,2.4,6.4,2.3,10.2c-0.1,2.7-0.6,6.1-0.6,6.1;
Z;"/>
</g>
</svg>
Here's my pen - hover it for example.
http://codepen.io/alcoven/pen/mOrYBd?editors=1100


Mouseover fires every time you move the mouse. Try mouseenter instead.
begin="squid.mouseenter"

Related

How to reverse animate motion?

Why my animation doesn't start from the top to the bottom ? How to reverse it correctly ? I don't know what I should change. (I tried keyPoints="1;0" keyTimes="0;1" which didn't work)
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="350" viewBox="0 0 500 350"><path d="M404.88 470.22V79.69c-.2-19-14.21-33-17.52-36.19s-16.77-15.19-34.7-15.45h-1.11c-28.65.35-59.55-.12-319.52 0H28" stroke="#000" stroke-miterlimit="10" fill="none" id="motionPath"></path><rect id="circle" x="-25" y="-25" rx="15" ry="15" width="50" height="50"></rect><animateMotion xlink:href="#circle" from="50" to="450" dur="5s" begin="0s" repeatCount="1" rotate="auto" fill="freeze"><mpath xlink:href="#motionPath"></mpath></animateMotion></svg>

It is necessary to remove from =" 50 " to =" 450 " since the length of the path of movement is determined by the length of the path mpath
The direction of movement of an object along a path depends on two parameters
keyPoints="1;0" - movement from start to finish
keyTimes="0;1"
keyPoints="0;1" - movement from end to start
keyTimes="0;1"
In the example below, JS is used only to handle the event of pressing the control buttons: forward and back
var animation1 = document.getElementById("forward")
function forwardSVG(){
animation1.beginElement();
}
var animation2 = document.getElementById("back")
function backSVG(){
animation2.beginElement();
}
<div id="pathContainer4">
<button id="btn1" onclick="forwardSVG()">forward</button />
<button id="btn2" onclick="backSVG()">Back</button />
</div>
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="350" viewBox="50 0 500 350">
<path id="motionPath" d="M404.88 470.22V79.69c-.2-19-14.21-33-17.52-36.19s-16.77-15.19-34.7-15.45h-1.11c-28.65.35-59.55-.12-319.52 0H28" stroke="#000" stroke-miterlimit="10" fill="none" >
</path>
<rect id="circle" x="0" y="-25" rx="15" ry="15" width="50" height="50"></rect>
<!-- Forward motion animation -->
<animateMotion id="forward"
xlink:href="#circle"
dur="5s"
begin="indefinite"
rotate="auto"
fill="freeze"
repeatCount="1"
keyPoints="1;0"
keyTimes="0;1"
calcMode="linear">
<mpath xlink:href="#motionPath"></mpath>
</animateMotion>
<!-- Backward motion animation -->
<animateMotion id="back"
xlink:href="#circle"
dur="5s"
begin="indefinite"
rotate="auto"
fill="freeze"
repeatCount="1"
keyPoints="0;1"
keyTimes="0;1"
calcMode="linear">
<mpath xlink:href="#motionPath"></mpath>
</animateMotion>
</svg>

Here is the reverse you want.
I modified the shape a little but you can modify it back again.
Hope that this is the solution to your problem.
you can make it freeze too if you want.
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="350" viewBox="0 0 500 350">
<g>
<path stroke="#000" stroke-miterlimit="10" fill="none" id="motionPath"
d="M404.88 470.22V79.69c-.2-19-14.21-33-17.52-36.19s-16.77-15.19-34.7-15.45h-1.11c-28.65.35-59.55-.12-319.52 0H28"/>
<rect id="circle" x="-25" y="-25" rx="15" ry="15" width="50" height="60" fill="black"
stroke="black" stroke-width="1" transform="translate(-25,-10)">
<animateMotion path="M404.88 470.22V79.69c-.2-19-14.21-33-17.52-36.19s-16.77-15.19-34.7-15.45h-1.11c-28.65.35-59.55-.12-319.52 0H28"
begin= "0s" dur="5s" repeatCount="1" rotate="auto" fill="freeze"
keyPoints="1;0" keyTimes="0;1" calcMode="linear"/>
</rect>
</g>
</svg>

Animating a defined path's d attribute doesn't work on firefox

I'm animating a d attribute of a path that is wrapped around a defs tag and linked using a
few use tags. This works fine on Chrome, however no animation on Firefox. I tried this with relative and absolute paths to no avail.
<svg viewBox="0 0 300 100">
<defs>
<path id="a" d="M0,20 H200 V70 H0z" />
</defs>
<use xlink:href="#a" />
<animate xlink:href="#a" attributeName="d" values="M0,20 H200 V70 H0z; M0,20 H200 V45 H0z" keyTimes="0;1" dur="1s" begin="0s" fill="freeze" />
</svg>
Is the only way to make this work is by repeating the path and animating them all or is there a way to make this work on Firefox?

As commented by #Robert Longson
I think you'd need to repeat the paths. At the moment SMIL changes to
the things that a element points to do not trigger the to
re-render.
Therefore, it is necessary to transfer the animation directly inside the <path> tags
<svg viewBox="0 0 300 100">
<defs>
<path id="a" d="M0,20 H200 V70 H0z" >
<animate
attributeName="d"
values="
M0,20 H200 V70 H0z;
M0,20 H200 V45 H0z"
keyTimes="0;1"
dur="1s"
begin="0s"
fill="freeze" />
</path>
</defs>
<use xlink:href="#a" />
</svg>
Start animation after click
<svg id ="svg1" viewBox="0 0 300 100">
<defs>
<path id="a" d="M0,20 H200 V70 H0z" >
<animate
attributeName="d"
values="
M0,20 H200 V70 H0z;
M0,20 H200 V45 H0z"
keyTimes="0;1"
dur="1s"
begin="svg1.click"
fill="freeze" />
</path>
</defs>
<use xlink:href="#a" />
</svg>

Easing animateMotion in SVG

I want to apply an easing to an animateMotion tag.
I'm confused about which attributes are relevant to animate a shape: if I understood well calcMode="spline" is required, along with the definition of keyTimes and keySplines; but what about the use of keySplines and values?
However, I tried to insert timings into my animation, but something went wrong:
<g style="transform-origin:50%;transform: rotate(180deg);">
<path id="verticalMotionPath" d="m 100,100 0, 50" stroke-width="5px" stroke="red" fill="none" stroke-linecap="round" stroke-linejoin="round" />
<circle cx="0" cy="0" r="5" fill="#333333">
<animateMotion dur="0.2s" repeatCount="once" fill="freeze" calcMode="spline" keyPoints="0.25;0.50;0.75;1" keyTimes="0;0.25;0.75;1">
<mpath xlink:href="#verticalMotionPath"/>
</animateMotion>
</circle>
</g>
My aim would be to apply to this example timings to draw from tools like this one

You are specifying calcMode="spline", but you haven't provided a keySplines attribute.
The value for keySplines can just be copied from your spline editing tool.
<circle cx="0" cy="0" r="5" fill="#333333">
<animateMotion dur="2.2s" repeatCount="once" fill="freeze"
calcMode="spline" keyTimes="0;1" keySplines="0.1 0.8 0.9 0.1">
<mpath xlink:href="#verticalMotionPath"/>
</animateMotion>
</circle>
Full demo (I've slowed down the animation so you can see it is working).
<!DOCTYPE HTML>
<html>
<body>
<?xml version="1.0"?>
<svg width="400" height="400" viewBox="0 0 200 200"
xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink" style="background:aquamarine">
<style>
path {
animation-name:animateDash;
animation-duration:5s;
animation-iteration-count:once;
animation-fill-mode:forwards;
}
#keyframes animateDash {
from{stroke-dasharray:0,2305}
to {stroke-dasharray:2305,0}
}
</style>
<g style="transform-origin:50%;transform: rotate(180deg);">
<path id="verticalMotionPath" d="m 100,100 0, 50" stroke-width="5px" stroke="red" fill="none" stroke-linecap="round" stroke-linejoin="round" />
<circle cx="0" cy="0" r="5" fill="#333333">
<animateMotion dur="2.2s" repeatCount="once" fill="freeze"
calcMode="spline" keyTimes="0;1" keySplines="0.1 0.8 0.9 0.1">
<mpath xlink:href="#verticalMotionPath"/>
</animateMotion>
</circle>
</g>
<g style="transform-origin:50%;transform: rotate(60deg);">
<path id="verticalMotionPath" d="m 100,100 0, 50" stroke-width="5px" stroke="white" fill="none" stroke-linecap="round" stroke-linejoin="round" />
<circle cx="0" cy="0" r="5" fill="#333333">
<animateMotion dur="0.2s" repeatCount="once" fill="freeze">
<mpath xlink:href="#verticalMotionPath"/>
</animateMotion>
</circle>
</g>
<g style="transform-origin:50%;transform: rotate(-60deg);">
<path id="verticalMotionPath" d="m 100,100 0, 50" stroke-width="5px" stroke="blue" fill="none" stroke-linecap="round" stroke-linejoin="round" />
<circle cx="0" cy="0" r="5" fill="#333333">
<animateMotion dur="0.2s" repeatCount="once" fill="freeze">
<mpath xlink:href="#verticalMotionPath"/>
</animateMotion>
</circle>
</g>
</svg>
</body>
</html>

This is how I would do it although I don't use animateMotion.
Since your path is made up of lines you can define the values for <animateTransform> like this:
Your path's d="M100, 100 L100, 47 146, 73"
the animation's values="100, 100; 100, 47;146, 73"
This is a working example:
<svg width="400" height="400" viewBox="0 0 200 200" style="background:aquamarine">
<path id="theMotionPath" d="M100, 100 L100, 47 146, 73" stroke-width="5px" stroke="antiquewhite" fill="none" stroke-linecap="round" stroke-linejoin="round" />
<circle r="5" >
<animateTransform
attributeType="XML"
attributeName="transform"
type="translate"
values="100,100; 100,47; 146,73"
keySplines= ".5 0 .5 1; 0 .75 .25 1";
calcMode="spline"
dur="4s"
repeatCount="indefinite" />
</circle>
</svg>
The keySplines length must be equal to the length of the values - 1. In this case values.length = 3 thus keySplines.length = 2, i.e: the movement from the first to the second value is defined by the first key spline; the movement from the second to the third value is defined by the second key spline. Every value of the keySplines is defining the 2 control points of a Bézier curve.

RxJS loading indicator on any ajax request

I need to show a loading indicator any time an ajax request occurs. Based on this question RxJs How to set default request headers? I believe I'll have to create an ajax wrapper to use.
My requirements are to start the loading indicator when a request occurs. It can start again if there is already a request running. When a request completes/errors, I need the loading to go away. It should only go away if all requests have completed though.
In axios I just use interceptors and have a counter. It's pretty simple. I really have no clue how to handle this with RxJS though. My guess would be it needs to do something similar, I just really don't know how to write it.

Build a custom HTTP client that exposes a loading BehaviorSubject. Every time a connection is opened increment the count and decrement the count each time a connection finishes. Have your loading indicator show when the connection count is greater than 0 and hide when it is 0.
class HttpClient {
constructor() {
this.connectionCount$ = new rxjs.BehaviorSubject(0);
this.loading$ = new rxjs.BehaviorSubject(false);
}
incrementConnectionCount() {
this.connectionCount$.next(this.connectionCount$.getValue() + 1);
if (this.connectionCount$.getValue() === 1) {
this.loading$.next(true);
}
}
decrementConnectionCount() {
this.connectionCount$.next(this.connectionCount$.getValue() - 1);
if (this.connectionCount$.getValue() === 0) {
this.loading$.next(false);
}
}
get(url) {
this.incrementConnectionCount();
setTimeout(() => { // Simulate a http call that takes 2 seconds
this.decrementConnectionCount();
}, 2000);
}
// Do the same for the other verbs, put, post, delete etc
}
const httpClient = new HttpClient();
// Anywhere you want a loading spinner subscribe to the loading observable and show and hide the spinner
httpClient.loading$.subscribe(loading => {
document.getElementById('loading').style.display = loading ? 'block' : 'none';
});
// Show the connection count
httpClient.connectionCount$.subscribe(connectionCount => {
document.getElementById('connectionCount').innerText = connectionCount;
});
// Each time you click the button you will simulate a http get that takes two seconds, press it multople times and it will show for 2 seconds after the last click
document.getElementById('load').addEventListener('click', () => {
httpClient.get('someUrl');
});
#loading {
display: none;
}
svg {
vertical-align: middle;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.3.3/rxjs.umd.min.js"></script>
<button id="load">Load</button> Connection count: <span id="connectionCount"></span>
<div id="loading"> <!-- Get a funky loading spinner from loading.io -->
<svg xmlns="http://www.w3.org/2000/svg" class="lds-cutiefox" width="80px" height="80px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
<g transform="rotate(80.5368 50 50)">
<animateTransform attributeName="transform" type="rotate" values="360 50 50;0 50 50" keyTimes="0;1" dur="1.5s" repeatCount="indefinite" calcMode="spline" keySplines="0.5 0 0.5 1" begin="-0.15000000000000002s"/>
<circle cx="50" cy="50" r="39.891" stroke="#ffc254" stroke-width="14.4" fill="none" stroke-dasharray="0 300">
<animate attributeName="stroke-dasharray" values="15 300;55.1413599195142 300;15 300" keyTimes="0;0.5;1" dur="1.5s" repeatCount="indefinite" calcMode="linear" keySplines="0 0.4 0.6 1;0.4 0 1 0.6" begin="-0.069s"/>
</circle>
<circle cx="50" cy="50" r="39.891" stroke="#fff1cf" stroke-width="7.2" fill="none" stroke-dasharray="0 300">
<animate attributeName="stroke-dasharray" values="15 300;55.1413599195142 300;15 300" keyTimes="0;0.5;1" dur="1.5s" repeatCount="indefinite" calcMode="linear" keySplines="0 0.4 0.6 1;0.4 0 1 0.6" begin="-0.069s"/>
</circle>
<circle cx="50" cy="50" r="32.771" stroke="#000000" stroke-width="1" fill="none" stroke-dasharray="0 300">
<animate attributeName="stroke-dasharray" values="15 300;45.299378454348094 300;15 300" keyTimes="0;0.5;1" dur="1.5s" repeatCount="indefinite" calcMode="linear" keySplines="0 0.4 0.6 1;0.4 0 1 0.6" begin="-0.069s"/>
</circle>
<circle cx="50" cy="50" r="47.171" stroke="#000000" stroke-width="1" fill="none" stroke-dasharray="0 300">
<animate attributeName="stroke-dasharray" values="15 300;66.03388996804073 300;15 300" keyTimes="0;0.5;1" dur="1.5s" repeatCount="indefinite" calcMode="linear" keySplines="0 0.4 0.6 1;0.4 0 1 0.6" begin="-0.069s"/>
</circle>
</g>
<g transform="rotate(143.103 50 50)">
<animateTransform attributeName="transform" type="rotate" values="360 50 50;0 50 50" keyTimes="0;1" dur="1.5s" repeatCount="indefinite" calcMode="spline" keySplines="0.5 0 0.5 1"/>
<path fill="#ffc254" stroke="#000000" d="M97.2,50c0,6.1-1.2,12.2-3.5,17.8l-13.3-5.4c1.6-3.9,2.4-8.2,2.4-12.4"/>
<path fill="#fff1cf" transform="translate(0,-0.1)" d="M93.6,50c0,1.2,0,2.4-0.1,3.6L93,57.2c-0.4,2-2.3,3.3-4.2,2.8l-0.2-0.1c-1.8-0.5-3.1-2.3-2.7-3.9l0.4-3 c0.1-1,0.1-2,0.1-3"/>
<path fill="#ffc254" stroke="#000000" d="M85.4,62.5c-0.2,0.7-0.5,1.4-0.8,2.1c-0.3,0.7-0.6,1.4-0.9,2c-0.6,1.1-2,1.4-3.2,0.8v0c-1.1-0.7-1.7-2-1.2-2.9 c0.3-0.6,0.5-1.2,0.8-1.8c0.2-0.6,0.6-1.2,0.7-1.8"/>
<path fill="#ffc254" stroke="#000000" d="M94.5,65.7c-0.3,0.9-0.7,1.7-1,2.6c-0.4,0.8-0.7,1.7-1.1,2.5c-0.7,1.4-2.3,1.9-3.4,1.3l0,0 c-1.1-0.7-1.5-2.2-0.9-3.4c0.4-0.8,0.7-1.5,1-2.3c0.3-0.8,0.7-1.5,0.9-2.3"/>
<path fill="#ffc254" stroke="#000000" d="M85.6,67c0,0.8,0.1,1.6,0.3,2.4c0.6-0.5,1.1-1,1.4-1.7c0.2-0.7,0.2-1.5-0.1-2.2C86.5,64,85.6,66.3,85.6,67z"/>
</g>
<g transform="rotate(80.5368 50 50)">
<animateTransform attributeName="transform" type="rotate" values="360 50 50;0 50 50" keyTimes="0;1" dur="1.5s" repeatCount="indefinite" calcMode="spline" keySplines="0.5 0 0.5 1" begin="-0.15000000000000002s"/>
<path fill="#fff1cf" stroke="#000000" d="M91,33.6l-10,4c-0.4-1.2-1.1-2.4-1.7-3.5c-0.2-0.5,0.3-1.1,0.9-1C83.6,32.9,87.4,32.9,91,33.6z"/>
<path fill="#fff1cf" stroke="#000000" d="M83.2,36.7l10-4c-0.6-1.7-1.5-3.3-2.3-4.9c-0.3-0.7-1.2-0.6-1.4,0.1C87.6,31.1,85.7,34,83.2,36.7z"/>
<path fill="#ffc254" stroke="#000000" transform="translate(0,0.2)" d="M82.8,50c0-3.4-0.5-6.8-1.5-10c-0.2-0.8-0.4-1.5-0.3-2.3c0.1-0.8,0.4-1.6,0.7-2.4c0.7-1.5,1.9-3.1,3.7-4l0,0 c1.8-0.9,3.7-1,5.6-0.3c0.9,0.4,1.7,1,2.4,1.8c0.7,0.8,1.3,1.7,1.7,2.8c1.5,4.6,2.2,9.5,2.2,14.4"/>
<path fill="#fff1cf" transform="translate(0,0.3)" d="M86.4,50l0-0.9l-0.1-0.9l-0.1-1.9c0-0.9,0.2-1.7,0.7-2.3c0.5-0.7,1.3-1.2,2.3-1.4l0.3,0c0.9-0.2,1.9,0,2.6,0.6 c0.7,0.5,1.3,1.4,1.4,2.4l0.2,2.2l0.1,1.1l0,1.1"/>
<path fill="#000000" d="M88.6,36.6c0.1,0.3-0.2,0.7-0.6,0.8c-0.5,0.2-0.9,0-1.1-0.3c-0.1-0.3,0.2-0.7,0.6-0.8C88,36.1,88.5,36.2,88.6,36.6z"/>
<path fill="none" stroke="#000000" d="M86,38.7c0.2,0.6,0.8,0.9,1.4,0.7c0.6-0.2,0.9-0.9,0.6-2.1c0.3,1.2,1,1.7,1.6,1.5c0.6-0.2,0.9-0.8,0.8-1.4"/>
<path fill="#ffc254" stroke="#000000" d="M86.8,42.2l0.4,2.2c0.1,0.4,0.1,0.7,0.2,1.1l0.1,1.1c0.1,1.2-0.9,2.3-2.2,2.3h0c-1.3,0-2.5-0.8-2.5-1.9l-0.1-1 c0-0.3-0.1-0.6-0.2-1l-0.3-1.9"/>
<path fill="#ffc254" stroke="#000000" d="M96.2,40.2l0.5,2.7c0.1,0.5,0.2,0.9,0.2,1.4l0.1,1.4c0.1,1.5-0.9,2.8-2.2,2.8c-1.3,0-2.5-1.1-2.6-2.4l-0.1-1.2 c0-0.4-0.1-0.8-0.2-1.2l-0.4-2.5"/>
<path fill="none" stroke="#000000" d="M90.9,36.4c1.1-1.1,2.7-1.6,4.3-1.9"/>
<path fill="none" stroke="#000000" d="M91.6,37.5c1.3-0.5,2.8-0.8,4.2-0.7"/>
<path fill="none" stroke="#000000" d="M91.7,38.8c0.2-0.1,0.4-0.1,0.7-0.1c1.2-0.1,2.5,0,3.8,0.3"/>
<path fill="none" stroke="#000000" d="M85,38.4c-1.6-0.1-3.1,0.6-4.6,1.2"/>
<path fill="none" stroke="#000000" d="M85,39.5c-1.4,0.3-2.8,0.9-4,1.6"/>
<path fill="none" stroke="#000000" d="M85.5,40.4c-0.2,0-0.4,0.1-0.7,0.2c-1.1,0.5-2.2,1.1-3.2,1.8"/>
<path fill="#ff7bac" d="M92.8,34.2c0.1,0.3-0.3,0.8-0.9,1c-0.6,0.2-1.2,0.1-1.4-0.2c-0.1-0.3,0.3-0.8,0.9-1 C92.1,33.8,92.7,33.9,92.8,34.2z"/>
<path fill="#ff7bac" d="M82.2,38.2c0.1,0.3,0.7,0.3,1.3,0.1c0.6-0.2,1-0.6,0.9-0.9c-0.1-0.3-0.7-0.3-1.3-0.1 C82.5,37.5,82,37.9,82.2,38.2z"/>
<path fill="#000000" d="M90,35.7L89.3,36l-0.3-0.7c-0.3-0.9,0.1-1.9,0.9-2.3l0.7-0.3l0.3,0.7C91.3,34.4,90.9,35.4,90,35.7z"/>
<path fill="#000000" d="M85.3,37.4l0.7-0.2l-0.2-0.6c-0.3-0.8-1.3-1.2-2.1-0.8L82.9,36l0.2,0.6C83.5,37.4,84.4,37.7,85.3,37.4z"/>
</g></svg>
Loading...
</div>

SVG - animate opacity

could you please help me out, how to create SVG animation, which will behave like this? https://framer.cloud/aSUDY/
I did my best, but it always misbehaves :-(
Here is my code, where I used 6 animations to cycle through (3 to animate from 0.5 to 1 opacity and three to animate vice versa)
<?xml version="1.0" encoding="UTF-8"?>
<svg width="100%" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="background: #000085;">
<defs>
<ellipse id="CON11" fill="#FFFFFF" fill-opacity="0.5" cx="0.583333333" cy="1.5" rx="1" ry="1" >
<animate
id="anim1"
attributeType="xml"
attributeName="fill-opacity"
begin="0s;anim33.end"
from="0.5"
to="1"
dur="1s"
fill="freeze"
/>
</ellipse>
<path id="CON22" fill="#FFFFFF" fill-opacity="0.5" d="M1.78441961,0.25 L0.75,1.24747605 C1.2672098,1.94570929 1.2672098,2.84343773 0.75,3.54167097 L1.78441961,4.53914702 C3.02572314,3.34217576 3.02572314,1.54671887 1.78441961,0.25 Z">
<animate
id="anim2"
attributeType="xml"
attributeName="fill-opacity"
begin="anim1.end"
from="0.5"
to="1"
dur="1s"
fill="freeze"
/>
</path>
<path id="CON33" fill="#FFFFFF" fill-opacity="1" d="M1.53441961,8.85936702e-16 L0.5,0.99747605 C2.36195529,2.79293294 2.36195529,5.58586588 0.5,7.48107038 L1.53441961,8.47854643 C4.12046863,6.18435151 4.12046863,2.39394252 1.53441961,0 L1.53441961,8.85936702e-16 Z">
<animate
id="anim3"
attributeType="xml"
attributeName="fill-opacity"
begin="anim2.end"
from="0.5"
to="1"
dur="1s"
fill="freeze"
/>
</path>
<ellipse id="CON11" fill="#FFFFFF" fill-opacity="1" cx="0.583333333" cy="1.5" rx="1" ry="1" >
<animate
id="anim11"
attributeType="xml"
attributeName="fill-opacity"
begin="anim3.end"
from="1"
to="0.5"
dur="0.1"
fill="freeze"
/>
</ellipse>
<path id="CON22" fill="#FFFFFF" fill-opacity="1" d="M1.78441961,0.25 L0.75,1.24747605 C1.2672098,1.94570929 1.2672098,2.84343773 0.75,3.54167097 L1.78441961,4.53914702 C3.02572314,3.34217576 3.02572314,1.54671887 1.78441961,0.25 Z">
<animate
id="anim22"
attributeType="xml"
attributeName="fill-opacity"
begin="anim11.end"
from="1"
to="0.5"
dur="0.1"
fill="freeze"
/>
</path>
<path id="CON33" fill="#FFFFFF" fill-opacity="0.5" d="M1.53441961,8.85936702e-16 L0.5,0.99747605 C2.36195529,2.79293294 2.36195529,5.58586588 0.5,7.48107038 L1.53441961,8.47854643 C4.12046863,6.18435151 4.12046863,2.39394252 1.53441961,0 L1.53441961,8.85936702e-16 Z">
<animate
id="anim33"
attributeType="xml"
attributeName="fill-opacity"
begin="anim22.end"
from="1"
to="0.5"
dur="0.1"
fill="freeze"
/>
</path>
</defs>
<g id="ACFT" transform="translate(2.000000, 2.000000)" fill="#FFFFFF" fill-opacity="0.5">
<path d="M19,14 L19,12 L11,7 L11,1.5 C11,0.67 10.33,0 9.5,0 C8.67,0 8,0.67 8,1.5 L8,7 L0,12 L0,14 L8,11.5 L8,17 L6,18.5 L6,20 L9.5,19 L13,20 L13,18.5 L11,17 L11,11.5 L19,14 Z" id="Shape"></path>
</g>
<g id="CON3" transform="translate(18.000000, 2.000000)" >
<use xlink:href="#CON33" ></use>
</g>
<g id="CON2" transform="translate(16.000000, 4.000000)" >
<use xlink:href="#CON22" ></use>
</g>
<g id="CON1" transform="translate(15.000000, 5.000000)" >
<use xlink:href="#CON11" ></use>
</g>
</svg>

I've changed the animations to use values, they don't really need to be linked.
I've removed the duplication and the elements that really were'nt doing anything other than add complexity.
<svg width="100%" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="background: #000085;">
<g id="ACFT" transform="translate(2.000000, 2.000000)" fill="#FFFFFF" fill-opacity="0.5">
<path d="M19,14 L19,12 L11,7 L11,1.5 C11,0.67 10.33,0 9.5,0 C8.67,0 8,0.67 8,1.5 L8,7 L0,12 L0,14 L8,11.5 L8,17 L6,18.5 L6,20 L9.5,19 L13,20 L13,18.5 L11,17 L11,11.5 L19,14 Z" id="Shape"></path>
</g>
<g id="CON3" transform="translate(18.000000, 2.000000)" >
<path id="CON33" fill="#FFFFFF" fill-opacity="1" d="M1.53441961,8.85936702e-16 L0.5,0.99747605 C2.36195529,2.79293294 2.36195529,5.58586588 0.5,7.48107038 L1.53441961,8.47854643 C4.12046863,6.18435151 4.12046863,2.39394252 1.53441961,0 L1.53441961,8.85936702e-16 Z">
<animate
id="anim3"
attributeType="xml"
attributeName="fill-opacity"
begin="0s"
values="0.5;0.5;0.5;0.5;1"
dur="2s"
repeatCount="indefinite"
/>
</path>
</g>
<g id="CON2" transform="translate(16.000000, 4.000000)" >
<path id="CON22" fill="#FFFFFF" fill-opacity="0.5" d="M1.78441961,0.25 L0.75,1.24747605 C1.2672098,1.94570929 1.2672098,2.84343773 0.75,3.54167097 L1.78441961,4.53914702 C3.02572314,3.34217576 3.02572314,1.54671887 1.78441961,0.25 Z">
<animate
id="anim2"
attributeType="xml"
attributeName="fill-opacity"
begin="0s"
values="0.5;0.5;0.5;1;1"
dur="2s"
repeatCount="indefinite"
/>
</path>
</g>
<g id="CON1" transform="translate(15.000000, 5.000000)" >
<ellipse id="CON11" fill="#FFFFFF" fill-opacity="0.5" cx="0.583333333" cy="1.5" rx="1" ry="1" >
<animate
id="anim1"
attributeType="xml"
attributeName="fill-opacity"
begin="0s"
values="0.5;0.5;1;1;1"
dur="2s"
repeatCount="indefinite"
/>
</ellipse>
</g>
</svg>

Resources