How to add a .gif pre-loader to your website.
So the requirement is simple. Your site takes too long to load, and you don’t want people visiting your site to get board! Try method 2 if Method 1 does not work.
Method 1
We can do this in one go. Add following to your existing css or create new css file and link it in thr <head> tag. Get a direct link to your preloader animation and put it inside background property, make sure the color (#21242d in this case) matches the background color of the animation.
And format your html as follows.
I line 5 you can see I have linked my style.css . create two div s. Give ids loader and content .Now move everything inside your body tag (which were there previously) to content div. Create <script> tag just before the closing </body> tag and add the script in the file.
Method 2
First thing to do is inside the body tag(in index.html), create two div s. Give ids loader and content
<body> <div id="loader"></div> <div id="content"> <h1>WELCOME TO MY WEBSITE</h1> </div></body>
Move everything inside your body tag (which were there previously) to content div.
How create a JavaScript file as the one below and link it to your index.html
What this does is decrease the opacity of the loader by 0.05 in each 50 millisecond cycle, after the web site’s content is available.
Create and link following styles to your index.html for it to work properly.
Just don’t forget to specify the path of the gif animation properly, and choose a background color wisely. And make sure to use an animation that has less size (my animation is 50Kb, still too much). Otherwise it will take time to load the “loader”!
background: #fff url(‘loader.gif’) no-repeat center center
Your index.html should look like this (broadly speaking).
That’s it. Happy coding!
