I am trying desperatly to get my image "loader.gif" to show when the button is clicked while the next page loads(it takes around 30sec bc its a game)
Here is my code what am i doig wrong?
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hangman</title>
<link rel="stylesheet" href="hangman.css">
<script>
$(document).ready(function () {
$(".easy").click(function (e) {
$(".loading").css("background-image","url('loader.gif')");
});
});
</script>
</head>
<style>
body{
background-color:black;
background-image:
radial-gradient(white, rgba(255,255,255,.2) 2px, transparent 40px),
radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 30px),
radial-gradient(white, rgba(255,255,255,.1) 2px, transparent 40px),
radial-gradient(rgba(255,255,255,.4), rgba(255,255,255,.1) 2px, transparent 30px);
background-size: 550px 550px, 350px 350px, 250px 250px, 150px 150px;
background-position: 0 0, 40px 60px, 130px 270px, 70px 100px;
}
p,H1{
color: #00FF00;
font-size:30px;
}
#mainMenu{
margin-left:auto;
margin-right:auto;
width:70px;
border:1px solid #00FF00;
}
#headWrapper{
margin-left:40px;
margin-right:auto;
}
.loading {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url('loader.gif') 50% 50% no-repeat rgb(249,249,249);
}
</style>
<body>
<div id="headWrapper">
<H1>Select a difficulty</H1>
</div>
<div id="mainMenu">
<input type=button onclick="location.href='http://deathcrow.altervista.org/gd/hangman/easy/'" value="Easy" class="easy" >
<input type=button onclick="location.href='http://deathcrow.altervista.org/gd/hangman/medium/'" value="Intermediate" class="easy">
<input type=button onclick="location.href='http://deathcrow.altervista.org/gd/hangman/hard/'" value="Hard">
<input type=button onclick="location.href='http://deathcrow.altervista.org/gd/hangman/insanity/'" value="Insane">
</div>