Creating a Loading Animation When You First Open a Website

Displaying a loading animation when you first open a website using Jquery is quite interesting to implement on our website, many people think that it’s cooler than loading animation.

Usually the websites that apply a lot are portfolio type websites, movie promotion websites, artist websites, media websites, and others. However, it is not suitable for websites that need quick access, such as news websites or news portals.

The loading animation will appear as long as the website is loaded / loaded everything, after everything is ready, then the page is displayed perfectly, this is usually what we often see on Flash-based websites. But here we make it with jquery.

So how to apply this? on this occasion will try to discuss in a simple way, please follow the steps below.

Pattern for Background
Loading Animation (gif)
Image (image for demo taken from

  1. Create an HTML file with the name index.html then write the following script in body & /body.