Smooth fade out

Hello everyone

I’ve build a website but an implemented plugin needs some time to load. As the layout isn’t that beautiful while loading, I had needed to build a loading page. I’ve implemented it in my site and everything works fine, except I wanted to fadeout the loading screen smoothly but it doesn’t.

I think I need to build a more efficient loading screen but I don’t know how to do that exactly. What I currently do: hide al the content with the visibility: hidden css code and standard show the loading screen. With javascript I’ve built in a setTimeout and that will make the loading screen to fade out and show the actual content.

It works quite good but it doesn’t work smoothly. It stutters a lot and that’s not the purpose. How can I optimize my code for smoothly fade out the loading screen?

Github repo:

Thanks in advance!
Rob Nickans

Note: I also want the white background to fade out. (opacity change?)

Smooth transitions work well when the transtion is set up in the css and simply triggered via javascript. Google ‘css transitions with javascript’ to see what i mean.

I’ve done the thing with JQuery. I didn’t knew there was such a clean option. Thanks for the hint though!