Alx Tioltisan Alx Tioltisan - 1 month ago 14
CSS Question

CSS image dissapears too fast

I have a gif which shows when page loads but it won't work. My code appears to be ok, by my point of view. I have tried several times to modify, add, delete from code but it did not work. I have added img src to div loader but then preloader appeared for only couple miliseconds. Not even a second.



#loader-wrapper {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #fff;
/* change if the mask should have another color then white */
z-index: 9999;
/* makes sure it stays on top */
}
#loader {
width: 200px;
height: 200px;
position: absolute;
left: 50%;
/* centers the loading animation horizontally one the screen */
top: 50%;
/* centers the loading animation vertically one the screen */
background-image: url("images/Preloader_1.gif");
/* path to your loading animation */
background-repeat: no-repeat;
background-position: center;
margin: -100px 0 0 -100px;
/* is width and height divided by two */
}

<div id="loader-wrapper">
<div id="loader"></div>
</div>




Answer

If your looking to have a gif animation loading when the page is loading, you need to use JavaScript. In the below snippet I've provided simple jQuery that shows a gif when the page is loading, then shows the body of the HTML

jQuery(document).ready(function($) {

  $(window).load(function() {
    $('#loader').delay(500).fadeOut();
    $('#loader-wrapper').delay(500).fadeOut("slow");
  });

  $('body').show();

});
#loader-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
    /* change if the mask should have another color then white */
    z-index: 9999;
    /* makes sure it stays on top */
}
#loader {
    width: 200px;
    height: 200px;
    position: absolute;
    left: 50%;
    /* centers the loading animation horizontally one the screen */
    top: 50%;
    /* centers the loading animation vertically one the screen */
    background-image: url("http://img.ffffound.com/static-data/assets/6/77443320c6509d6b500e288695ee953502ecbd6d_m.gif");
    /* path to your loading animation */
    background-repeat: no-repeat;
    background-position: center;
    margin: -100px 0 0 -100px;
    /* is width and height divided by two */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <div id="loader-wrapper">
    <div id="loader"></div>
</div>
  <p>hello</p>
</body>

Comments