Today. we will create an animated pre-loader Logo image while loading it’s web-page content. It will fade-out after loading all the web-page content. It will be helpful when, web pages takes time to load and sometimes when page is too heavy (full of images/video).

Nowadays, sometimes we use too much images/graphics to show the web-page attractive. Result of this, we got our web-page too much heavy and it also takes time to load with a poor network. A web-page loader is a good idea to show while loading page contents in background. After loading all the content we can hide the pre-loader image.
How to Show Animated Logo as Pre-Loader while Web-Page is Loading
Earlier I had posted about $(document).ready() function but here we will use $(window).load() function. It will fire after DOM and all the web-page content is fully loaded.

Animated LOGO as Pre-loader GIF – Photoshop / Image Editor

You have to create an animated GIF image for Loader. For uniqueness, you have to use your website’s Logo. You can use Adobe Photoshop / GIMP or any other image editor (software) for this. I have used Adobe Photoshop to create this animated logo.

Pre-Loader

 

Html – Pre-loader element

In body part of HTML, we will create an empty DIV element with class “loader”. All the web page content will come after this DIV. I am assigning an ID “Loader_dg” to this empty DIV. It will help us to remove this loader element after all web-page content loaded.

<div class="loader" id="Loader_dg"></div>

CSS

We will show the Loader on top of all the elements and also in center of the page. So, we have to use “Position:fixed” and “z-index” property. So, it’s CSS will be,

.loader{
    background-color:#fff url('preloader.gif') no-repeat center center;
    height:100%;
    position:fixed;
    width:100%;
    z-index:99999;
    top:0;
    left:0;
    right:0;
    bottom:0
}

jQuery

After finishing above experiments we will found that, Loader Div element will appear top of all another page elements by default. Now, we need to hide this after complete loading of web page. So, we need to use $(window).load() event.

$(window).load(function(){
    $('#Loader_dg').hide()
})

Domo of Web-page Pre-loader

I have used the same technique in this website. You can easily check this after visit any page of this website. I hope, you will enjoy this loader.

view demo

Enjoyed this Post?

If you enjoyed this article, feel free to share this tutorial with your friends. Thanks for reading!

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.!

We respect your privacy. Your information will not be shared with any third party and you can unsubscribe at any time.
You can support this website by sharing. Thank you!DhirajCSS - Cascading Style SheetsJAVASCRIPTjQueryMobile Web TechnologyPhotoshopTutorialsadvance web technology,angle brackets,animation delay,animation direction,CSS 3,CSS framework,css3,gaming,graphical user interface,interactive web applications,javascript,jquery,loader,transparent background image,visual transition,web-page pre-loaderToday. we will create an animated pre-loader Logo image while loading it's web-page content. It will fade-out after loading all the web-page content. It will be helpful when, web pages takes time to load and sometimes when page is too heavy (full of images/video). Nowadays, sometimes we use too much...Web design / development tutorials covering HTML, jQuery & CSS. Cool tips and tricks of web designing using HTML5, CSS3 & jQuery Library. Latest updates in responsive or mobile web technology.