Simple jQuery Preloader with CSS and Image - Kvcodes
X

Congrats, You are Subscribed to Receive Updates.

Simple jQuery Preloader with CSS and Image


Introduction

Simple jQuery Preloader with CSS and Image is sample Program which helps to create a preloading animation on your website while taking time to load the necessary files from host. This is widely used to avoid users see the not fully functional website of yours.

Demo

Let’s make a clear idea and its demo code with it. First of all let’s create a html div under body and this should be the top of the body, because we need to show it as early as possible.

<div class="KvPreloaderDiv">
   <div class="KvPreloaderImage">
   </div>
</div>

And we need to write styles for those two div.

Simple-jQuery-Preloader-with-CSS-and-Image

 .KvPreloaderDiv {
 	width: 100%;
  	height: 100%;
  	position: absolute;
  	background-color: #fff;
  	z-index: 1;
 }
 .KvPreloaderImage{
  	width: 150px;
  	height: 150px;
  	position: absolute;
  	left: 50%;
  	top: 50%;
  	background-image:url(images/KvPreloaderImage.GIF); /* this GIF may be your custom one, Here I used a sample */
  	background-repeat: no-repeat;
  	background-position: center;
  	margin: -100px 0 0 -100px;
 }

And this codes should be written before you start writing the other styles of your website and linked files. And that’s it. One your site you need to hook jQuery to use the below codes. Also you can write Pure JS codes to make it work.

<script>
 // preloader
 $(window).load(function() {
 	$(".KvPreloaderDiv").delay(1000).fadeOut(1000);
 });
</script>

And that’s the code to create Preloader on your website.

commenter

About Varadharaj V

The founder of Kvcodes, Varadharaj V is an ERP Analyst and a Web developer specializing in WordPress(WP), WP Theme development, WP Plugin development, Frontaccounting(FA), Sales, Purchases, Inventory, Ledgers, Payroll & HRM, CRM, FA Core Customization, OpenCart Theme Development, PHP, HTML, CSS, jQuery, Bootstrap development and content SEO.

Comment Below

Your email address will not be published. Required fields are marked *

*

Current ye@r *

Menu

Sidebar

Subscribe E-mail Updates

Congrats, You are Subscribed to Receive Updates.

Advertisement

Category Posts