Simple code to help you create a loading div and disappear when the document loaded.
You may not see the loading message when it's on fast internet speed. So I add delay function to it (you don't need to add)
Loading...
<div class="loader">Loading...</div>
<style>
.loader{
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$( document ).ready(function() {
$(".loader").hide();
});
</script>
If you want to make the loader full screen, try the css as below.
You can also replace the text loading by any image GIF file you find on the internet
<div class="loader">Loading...</div>
<style>
.loader{
width: 100vw;
height: 100vh;
position: fixed;
background: white;
z-index: 100;
left: 0;
top:0;
text-align: center;
border: 3px solid black;
padding-top: 30%;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$( document ).ready(function() {
$(".loader").hide();
});
</script>
Vietnamese 