facebook twitter youtube
in Css - 19 Apr, 2014, This Tutorial Has Been Viewed 10,660 Times.
by admin - no comments
Image preloader using CSS
VN:F [1.9.22_1171]
Rating: 7.0/10 (4 votes cast)

This is a simple tutorial which helps you to put a preloader similar to flash preloaders on your website :) interesting huh , just check out this simple tutorial of how to implement the same.Just needed to add some 5 lines of code using css and your image preloader is ready.This is very useful when your website uses high resolution images or bigger size images.

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” … 120kb for example, and call it top.jpg. Last thing is loader.gif file. It can be any image.

CSS PART

* {margin:0; padding:0;}
div#container {width:770px; margin:0 auto;}
div#loader {background:url(loader.gif) center no-repeat;}
div#top {height:250px; background:url(top.jpg) no-repeat;}
div#content {height:550px; background-color:#3300FF;}

Save it as style.css

Special thanks to bwebi

VN:F [1.9.22_1171]
Rating: 7.0/10 (4 votes cast)
Image preloader using CSS, 7.0 out of 10 based on 4 ratings


coded by nessus

Leave a Reply

Close
Please support the site
By clicking any of these buttons you help our site to get better