I've been attempting to implement a loading animation using jQuery, but I'm encountering issues with loading the CSS file. I have tried various paths for the css file such as:
<link href="css/animation.css" type="text/css" rel="stylesheet">
<link href="../css/animation.css" type="text/css" rel="stylesheet">
Despite trying different paths, the CSS file is still not getting loaded in the HTML file. Strangely enough, when I placed the CSS file in the same folder as the HTML file, it worked perfectly fine.
My folder structure...
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);
}
While the js files are loading correctly, the CSS file seems to be having trouble. I'm puzzled as to where I may have gone wrong.