Hi,
How can I create a loading bar before the first page of my website
which could load all my website... It is a portfolio, and I have lots of pages and pictures
Thanks
/*this is what we want the div to look like when it is not showing*/
div.loading-invisible {
/*make invisible*/
display: none;
}
/*this is what we want the div to look likewhen it IS showing*/
div.loading-visible {
/*make visible*/
display: block;
position: absolute;
left: 50%;
top: 50%;
width: 100px;
height: 100px;
margin-top: -50px;
margin-left: -50px;
text-align: center;
background: #b0b0b0 url(ajax-loader.gif);
border:0;
}
<script type="text/javascript">
document.getElementById("loading").className = "loading-visible";
window.onload=function(){
document.getElementById("loading").className = "loading-invisible";
}
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>RAD ZONE Webcreation
</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="http://radservebeer.free.fr" />
<meta name="generator" content="PSPad editor, www.pspad.com" />
<link rel="stylesheet" href="preload.css" type="text/css" />
</head>
<body>
<!-- div for preload image -->
<div id="loading" class="loading-invisible">
<script type="text/javascript">
document.getElementById("loading").className = "loading-visible";
window.onload=function(){
document.getElementById("loading").className = "loading-invisible";
}
</script>
</div>
<!-- END div for preload image -->
<p>
<img src="http://radservebeer.free.fr/images/00587_acceptance_1600x1200.jpg" border="0" alt="big size image">
</p>
</body>
</html>
Is this code is ok to load all the website or only the first page (index.html)
Users browsing this forum: No registered users and 2 guests