How to show the page loading div until the page has finished loading with HTML and CSS?

Sometimes, we want to show the page Loading div until the page has finished loading with HTML and CSS.

In this article, we’ll look at how to show the page Loading div until the page has finished loading with HTML and CSS.

How to show the page loading div until the page has finished loading with HTML and CSS?

To show the page Loading div until the page has finished loading with HTML and CSS, we use flexbox.

For instance, we write

<div id="loading">
  <img id="loading-image" src="path/to/ajax-loader.gif" alt="Loading..." />
</div>

to add a div with an image inside.

Then we write

#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;
}

to make the div a flex container with display: flex;.

Then we center the div’s content horizontally with justify-content: center;.

And we center its contents vertically with align-items: center;.

We set its position to fixed so that it goes above the content.

And we set the z-index to put the div above other content.

Conclusion

To show the page Loading div until the page has finished loading with HTML and CSS, we use flexbox.