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 dont need to add)
Loading...
<div class="loader">Loading...</div><style>.loader{
}</style> <script type="litespeed/javascript" data-src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script type="litespeed/javascript">$(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 type="litespeed/javascript" data-src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script type="litespeed/javascript">$(document).ready(function(){$(".loader").hide()})</script>
English