Using jQuery and CSS, a loading icon can be conveniently shown until the page is fully loaded. Here we will provide a quick way to display a loading image when loading the page and short code snippets.
Upon opening the < body > file, add the following HTML. On page load, this loader div will display a loading image.
Use the following CSS to display a loading image on the loader div, render the page center of the loading image location, and cover the entire screen with a clear white background.
background: url('images/pageLoader.gif') 50% 50% no-repeat rgb(249,249,249);
At first include the jQuery library.
Now add the next line of code to cover the loading image when loading the entire page.