How to Display a Loader/Loading Image while Page Loads

Getting Started

First, we need the jQuery library. I've included the file in the downloadable of this tutorial, but if you want, you can get jQuery using this link. The example loader/loading image that I've used in this tutorial is also included in the downloadable. Note: I'm using jQuery 3.3.1 in this tutorial.

Creating our Page

Finally, we create the page where we place our loader. I've set up the jQuery code that the loader will still be there after 5 secs but you can remove this. Create a new file, name it as index.html and paste the codes below.
  1. <!DOCTYPE html>
  2. <meta charset="utf-8">
  3. <title>How to Display a Loader/Loading Image while Page Loads</title>
  4. <style type="text/css">
  5. #loader{
  6. position: fixed;
  7. left: 0px;
  8. top: 0px;
  9. width: 100%;
  10. height: 100%;
  11. z-index: 9999;
  12. background: url('img/loader.gif') 50% 50% no-repeat rgb(249,249,249);
  13. opacity: 1;
  14. }
  15. </style>
  16. </head>
  17. <div id="loader"></div>
  18. <p>If you can see this text it means that the page loads successfully</p>
  20. <script src="jquery.min.js"></script>
  21. <script type="text/javascript">
  22. $(window).on('load', function(){
  23. //you remove this timeout
  24. setTimeout(function(){
  25. $('#loader').fadeOut('slow');
  26. }, 5000);
  27. //remove the timeout
  28. //$('#loader').fadeOut('slow');
  29. });
  30. </body>
  31. </html>
That ends this tutorial. Happy Coding :)


Submitted byOkolie Azubuike (not verified)on Fri, 04/13/2018 - 22:13

Simple and Straight to the point.

Add new comment