How to Display a Loader/Loading Image while Page Loads

Submitted by: 
Language: 
Visitors have accessed this post 558 times.

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>
  19.  
  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 :)


Comments

Simple and Straight to the point.

Add new comment

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • You may insert videos with [video:URL]
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <table> <tr> <td> <th> <img> <h1> <h2> <h3> <iframe> [video]
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <asp>, <c>, <cpp>, <csharp>, <css>, <html4strict>, <java>, <javascript>, <mysql>, <php>, <python>, <sql>, <vb>, <vbnet>. The supported tag styles are: <foo>, [foo].
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.