How to create a GIF loader in HTML website for every page while loading-CodePudding

I want to add a loader to every page while loading, in my basic html website. I have tried different ways but I failed. So I want a code which actually runs and work properly.

CodePudding user response：

Adding a gif loader is as easy as adding an image to the HTML screen, It would be better if you post the code that you have tried, and if you are working with some Backend API's for which you want a loader.

CodePudding user response：

You can follow the below code for loading.

First, right after the <body> tag add this:

<div id="loading">
  <img id="loading-image" src="https://upload.wikimedia.org/wikipedia/commons/c/c7/Loading_2.gif?20170503175831" alt="Loading..." />
</div>

Then add the style

#loading {
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0.7;
  background-color: #fff;
  z-index: 99;
}
#loading-image {
  z-index: 100;
}

If in your project has jQuery 3.0 then you can use below:

  $(window).on('load', function () {
    $('#loading').hide();
  })

For older versions of jQuery then you can use below:

 $(window).load(function() {
    $('#loading').hide();
  });