New Solution To Add Loading Animation to Website
New Solution To Add Loading Animation to Website
Description About Loading Animation Code
In this tutorial, I’m going to show you how to add a loading animation to your website and remove it when everything is loaded.
Simulate Loading Delay our example page have just a div with an image.
Loading Animation And here is loader I found on codepen that I want to add to my website.
how-to-add-loader-to-website-1 I’m going to copy over the code for both HTML and CSS and then create a wrapper around it.
(Full source code below).
To Loader to cover the entire page when it’s loading, so I’ll set the width and height to 100%.
Then set the position to absolute and zero top/left.
Also add background color as well.
The original code use 50% top to center the loader.
I’ll remove it and use flex layout to center the cube loader instead.
how-to-add-loader-to-website-3 Load Event The loading Animation is ready.
Next we’ll need hide it when the loading is complete.
We can do that by listening to window load event which will trigger when all the elements have been completely loaded.
Then use jQuery fadeOut method to hide the loader.
Full Source Code
Code :