我为我的加载屏幕创建了一个动画svg。中风动画应该发生，直到收到网络呼叫。一旦收到网络呼叫，就应该进行填充并且应该进行复选标记动画。目前我在动画之间使用了时间延迟。
这是我的代码：
<?xml version="1.0" encoding="utf-8"?>
<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"
viewBox="0 0 1000 1000" style="enable-background:new 0 0 1000 1000;"
xml:space="preserve">
<style type="text/css">
.spin {
stroke-dashoffset:1000;
stroke-dasharray:200;
stroke-width:1;
stroke-opacity:1;
-webkit-animation: draw 8s linear;
-moz-animation: draw 8s linear;
animation: draw 8s linear;
fill-opacity: 0;
-webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes draw {
30%{stroke-dashoffset:0; fill-opacity: 0;}
50%{fill-opacity:1;}
100%{stroke-dashoffset:0; fill-opacity:1;}
}
@-moz-keyframes draw {
30%{stroke-dashoffset:0; fill-opacity: 0;}
50%{fill-opacity:1;}
100%{stroke-dashoffset:0; fill-opacity:1;}
}
@keyframes draw {
30%{stroke-dashoffset:0; fill-opacity: 0;}
50%{fill-opacity:1;}
100%{stroke-dashoffset:0; fill-opacity:1;}
}
</style>
<defs>
<linearGradient id="left-to-right">
<stop offset="0" stop-color="#f58020">
<animate dur="1s" attributeName="offset" begin="3.5s" fill="freeze"
from="0" to="1" />
</stop>
<stop offset="0" stop-color="#ffffff">
<animate dur="1s" attributeName="offset" begin="3s" fill="freeze"
from="0" to="1" />
</stop>
</linearGradient>
</defs>
<path class="spin" id="innercircle" fill="#F58020" stroke="#F58020"
d="m 690.8,553.4 c -16.7,-8.5 -34.2,-2.5 -44.6,15.6 -2.7,4.7 -4.9,9.7
-7.6,14.5 -36.8,64.8 -114.9,97 -187.5,77.4 -70.7,-19.1 -121.5,-85.5
-121.5,-158.8 -0.1,-104.2 96,-183.4 198,-162.2 32.8,6.8 61.6,22 85.9,49.2 l
53.89883,-44.2285 C 665.26881,342.98945 665.2,342.9 664.4,342.2 c -1.9,-1.5
-3.7,-3.1 -5.5,-4.8 C 614.2,294.3 561,271.8 498.6,270.5 356,267.4
240.1,395.4 267,542.8 291.3,675.9 421.4,758 552.6,724.5 622.4,706.7
673,663.8 704.2,598.7 c 8.8,-18.3 2.7,-37.1 -13.4,-45.3 z"/>
<path id="tick" fill="url(#left-to-right)" stroke="url(#left-to-right)"
stroke-width="1.5" opacity="1" d="m 613.4,389 c -36.1,29.3 -69.9,57.9
-107.1,88.1 -20.9,-22.6 -41,-44.4 -59.7,-64.8 -17,15.8 -32.4,30.1 -44.6,41.4
34.5,35.7 69.3,71.6 104.8,108.4 87.3,-70.6 175.2,-141.8 264,-213.7
-13.5,-18.9 -25.4,-35.4 -38.6,-53.8 -22,17.5 -43.50349,33.76422
-64.00349,50.16422 -0.3,-0.1 0.2,0.1 0,0 z"/>
</svg>