How can i fix the loading gif after the page is fully loaded?

I want my gif animation to fade out after the page is fully loading. The gif still appears after loading right now. I tried some fadeOut javascript, but the whole page is faded out. If you can help, it’ll be really appreciated, Here’s my code.

var $body = $('.loading');

var loading = [
    { elements: $body, properties: { width: '3%' } },
    { elements: $body, properties: { width: '60%' } },
    { elements: $body, properties: { width: '90%' } },
    { elements: $body, properties: { width: '100%' } },
    { elements: $body, properties: { height: '1260px' }, options: { 
      complete: function () { 
        $('.wrap').velocity( 'transition.slideLeftIn' );
        $('html').css({ background: 'white' });
      }
    }
  }
]; 

$.Velocity.RunSequence(loading);
<style>
.loading {
  background: url("../img/icon.gif");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 40px;
  min-height: 100px;
  display: block;
  position: absolute;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.wrap {
  opacity:0;
  transform: none;
}
</style>
<div class="loading">
<div class="wrap">contents</div>
</div>

18 thoughts on “How can i fix the loading gif after the page is fully loaded?”

  1. You can use fadOut jquery function, then remove or hide the element.

    $('.wrap').fadeOut( 1000, function() {
        $('.wrap').remove();
    });
    

    Implementation in your code:

    var loading = [
        { elements: $body, properties: { width: '3%' } },
        { elements: $body, properties: { width: '60%' } },
        { elements: $body, properties: { width: '90%' } },
        { elements: $body, properties: { width: '100%' } },
        { elements: $body, properties: { height: '1260px' }, options: { 
          complete: function () { 
            $('.wrap').fadeOut( 1000, function() {
               $('.wrap').remove();
            });
            $('html').css({ background: 'white' });
          }
        }
      }
    ];
    
    Reply

Leave a Comment