Last updated on January 27th, 2023 at 11:09 am
This is a simple tutorial to add a preloader (loading gif) similar to old flash preloaders on your website 🙂 interesting huh , just check out this simple tutorial of how to implement the same.
This is very useful when your website uses high resolution images or bigger size images.
You might also be interested in this tutorial on how to show loading image using Jquery
Now You can use larger images and show preloader first .
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="loader">
<div id="top"></div>
</div>
<div id="content"></div>
</div>
</body>
</html>
Save it as preloader.html
You can use any image, just make it “large” may be more tha 120kb for example, and call it top.jpg. Last thing at add is loader.gif.
CSS Script, save it as style.css
* {margin:0; padding:0;}
div#container {width:650px; margin:0 auto;}
div#loader {background:url(loader.gif) center no-repeat;}
div#top {height:650px; background:url(top.jpg) no-repeat;}
div#content {height:550px; background-color:#3300FF;color:#fff;}
admin