March 1, 2014

Weebly Tricks #33 - Web Page Preloader

Posted by Domingo Tambasacan at 3/01/2014

Web page Preloader



If your loading speed seems disturbing, I mean slow, then you're throwing your visitors away. If you cant do anything about the weight of your site than atleast you can do something to lessen the irritation caused by waiting. Page Preloader makes waiting more comfortable as if you're personally telling them to wait a second I'm on it!








1. The first thing you're going to do is to download the loader.gif located at the demo page including the instruction to downloading it.

2. Once that gif file has been downloaded, go to Design > Edit HTML/CSS > Add new file > then upload the loader.gif.

3. Now on the same screen, go to main-style.css located at the upper left. Copy the code below and paste it at the bottom most of the main-style.css. Save after.

#preloader  {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background-color: #fefefe;
     z-index: 99;
    height: 100%;
 }

#status  {
     width: 200px;
     height: 200px;
     position: absolute;
     left: 50%;
     top: 50%;
     background-image: url(loader.GIF);
     background-repeat: no-repeat;
     background-position: center;
     margin: -100px 0 0 -100px;
 }

4. Go to Pages Tab and select the page you want to insert this effects. Once selected, insert the code to the page <head>. You can do this by clicking the selected page and on the right pane click the advance settings. You will see the box for the header code, its where you insert the code below.

<script type="text/javascript">

// makes sure the whole site is loaded
jQuery(window).load(function() {
        // will first fade out the loading animation
jQuery("#status").fadeOut();
        // will fade out the whole DIV that covers the website.
jQuery("#preloader").delay(1000).fadeOut("fast");
})
</script>

5. Save and edit that page. Drag one embed code and paste the following on the TOP MOST of the page:

<div id="preloader">
  <div id="status">&nbsp;</div>
</div>

6. If you're planning to add this preloader to another page just repeat the step 4 and 5. Credits to the script maker located at the demo page. Thank You and hope you like it.

Get email updates and more access! (Free)
Email *
email marketing by activecampaign

About Author:

Hi I am Domz. I love inserting new widgets and effects on Weebly Template. I like helping people and I like them more being my subscriber. Follow me @ Twitter | Facebook



If you enjoyed this post and wish to be informed whenever a new post is published, then make sure you subscribe to my regular Email Updates. Subscribe Now!

...

1 comment:

 

© 2014. All Rights Reserved | My Weebly Tricks | Template by Blogger Widgets

Home | | Privacy Policy | Top