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.

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

Written by

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store