How to make a CSS page pre-loader which transitions into a welcome screen?

I’m new to web-dev, have found many templates for CSS loading animations but struggle to find the corresponding JS which makes the animation run indefinitely till the page has loaded. After this, I want the animation to end in a way that introduces the welcome screen. Is there a way to incorporate this into the CSS?

pseudo-code:

if(!loaded){
   CSS-loop()
} else {
   CSS-welcome()
}
showPage()

Many thanks!

24 thoughts on “How to make a CSS page pre-loader which transitions into a welcome screen?”

Leave a Comment