Hi, the loading time of each page varies. Loading time also varies with user internet speed. If we anyhow able to adapt the animation speed with the page loading time, It will look odd as it will be fast sometime and slow sometime.
So, I think, it would be better to keep animation duration constant and make the final state of animation to be hold for few seconds if the page is not loaded. In this way even if the page loads earlier, we can keep the page hidden behind animation until animation get completed.
I have experience in SVG and CSS animations. I can do this animation very well.
Thanks