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!
Hy!
If I understand your question you want to show loading animation when you change the page or show msg when load the homepage for the first time.
Loaders are a nice features if your page contains large files, and needs time to load the whole content.
There are javascript frameworks (Vue, React, Angular) which can implement this behavior. But this behavior happens for 2 reasons:
When your web browser send a HTTP request to a server to get the pages resources it could take some time. And this is the time window when the loader comes in handy.
But if you use just html + css + javascript the whole loading process is irrelevant. As I mentioned when you switch from previous page to new page, you have some time to show the loading panel. But this gap is only can filled by a framework. Without a framework the whole page is changing. And this means there is no chance for a loader to show.
But to practice web dev you can make the following:
This will show the loader first, and after loads the new page.
This solution gives some kind of feedback for the webpage visitor, but it won’t improve your SEO.
Or on the other hand if you want to show the „welcome msg” after the page is loaded there is a solution too.
Wrap the whole content inside a div and make it’s style to display none.
…and make a div as sibling of the wrapper (same leve, under or above the wrapper) which is displayed. And inside it you can place the welcome msg.
And make a javascript timeout function which hides the msg and shows the content.
If you set transition time in the css and add opacity to the wrapper which holds the content then the result could be nice as well.
For fade in animation:
https://stackoverflow.com/a/45023755/14893737
…or reverse if you want to apply this on msg div too.
Good luck! 🙂