Code hiệu ứng load đẹp

<div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 1200"><title>webpack logo</title>
<g>
<path id="st1" d="M1035.6 879.3l-418.1 236.5V931.6L878 788.3l157.6 91zm28.6-25.9V358.8l-153 88.3V765l153 88.4zm-901.5 25.9l418.1 236.5V931.6L320.3 788.3l-157.6 91zm-28.6-25.9V358.8l153 88.3V765l-153 88.4zM152 326.8L580.8 84.2v178.1L306.1 413.4l-2.1 1.2-152-87.8zm894.3 0L617.5 84.2v178.1l274.7 151.1 2.1 1.2 152-87.8z"/>
</g>
<g>
<path id="st2" d="M580.8 889.7l-257-141.3v-280l257 148.4v272.9zm36.7 0l257-141.3v-280l-257 148.4v272.9zm-18.3-283.6zM341.2 436l258-141.9 258 141.9-258 149-258-149z"/>
</g>
</svg>
</div>
<style>div{
width: 300px;
margin: auto;
left: 0;
right: 0;
transform: translateY(-50%); 
top: 50%;
position: absolute;
}
#st1{
stroke-dasharray: 6943.89208984375 6943.89208984375;
stroke-dashoffset: 6943.89208984375;
stroke-width: 3;
stroke: gray;
fill: #fff;
animation: anim 3s ease-in forwards;  
}
#st2{
stroke-dasharray: 3470.66748046875 3470.66748046875;
stroke-dashoffset: 3470.66748046875;
stroke-width: 3;
stroke: gray;
fill: #fff;
animation: anim2 5s 2s ease-out forwards; 
}
@keyframes anim {
85%{
stroke-dashoffset: 0;
stroke-width: 3;
fill: #fff;
}
100%{
stroke-dashoffset: 0;
stroke-width: 0;
fill: #8ED6FB;
}
}
@keyframes anim2 {
50%{
stroke-dashoffset: 0;
stroke-width: 3; 
fill: #fff;
}
75%,100%{
stroke-dashoffset: 0;
stroke-width: 0;
fill: #1C78C0;
}
}
</style>
<script>document.getElementById('st1').getTotalLength(); //6943.89208984375
document.getElementById('st2').getTotalLength(); //3470.66748046875
</script>