Create a simple preloader with jQuery

Create a simple preloader with jQuery

Now a days every websites are powered by jQuery Preloader. It will add interactivity to a webpage with some sort of animations.

Today I am going to tell how to create a simple jQuery Preloader with few lines of jQuery code & few lines of CSS code. This simple JQuery Preloader trick will help them to wait for few seconds in the page before taking any hard decision to move out from our website.

Image for post

Let?s start

Include these styles at your project

Make sure you have jquery included in your project, then create a js file named preloader.js and include that file after jquery. Otherwise it won?t work.

<script src=”/jquery.js”></script><script src=”/preloader.js”></script>

Very last step

Put these html codes just immediate after the <body> tag

Replace preloader.gif with a preloader gif image. Put preloader give image location from your website or html template.

You can get tons of preloader gif image from https://preloaders.net/

Codepen Demo

18