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.