Having trouble making a gif fade out after the page loads? Here's my attempt so far:
I want the overlay, which includes a white background and the gif, to gradually become transparent once the rest of the page is fully loaded.
Take a look at the following code snippet, along with a link to a test page I've been working on:
Any suggestions or ideas?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script
src="https://code.jquery.com/jquery-3.1.0.slim.min.js"
integrity="sha256-cRpWjoSOw5KcyIOaZNo4i6fZ9tKPhYYb6i5T9RSVJG8="
crossorigin="anonymous"></script>
<div id="overlay">
<img src="https://www.isostech.com/wp-content/uploads/2015/04/loader.gif" alt="Loading" /><br/>
Loading...
</div>
Hello World!
<script>
$(window).load(function(){
$('#overlay').fadeOut();
});
</script>
Here is the corresponding CSS:
#overlay {
background-color: white;
color: #666666;
position: fixed;
height: 100%;
width: 100%;
z-index: 5000;
top: 0;
left: 0;
float: left;
text-align: center;
padding-top: 25%;
}