I have made a Loading animation using CSS & JS. When the page loads the animation is showed first and disappears when the page contents are loaded. In it's current form the js code and the relevant links have to be loaded in each html file. I'm seeking a solution in which the animation code is in another file and all the other web pages just call that file so that changes made in one place are applied everywhere.
Found a prospective solution in the below link.
Include another HTML file in a HTML file
I want to know whether there is a better solution than the one mentioned in the above link??
The code is as follows.
index.html
<html>
<head>
<title>Loading Animation using jQuery</title>
<script src="js/jquery.js"></script>
<script src="js/jquery.backstretch.js"></script>
<link href="css/animation.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="loader">
</div>
<h2>Hi There</h2>
<script>
$(window).load(function(){
$("#loader").delay(10000).hide(0).fadeOut("slow");
});
</script>
</body>
</html>
animation.css
#loader{
z-index:999999;
display:block;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:url(images/loader.gif) 50% 50% no-repeat rgb(249,249,249);
}
