MyBB Community Forums

Earlier we have learned a quick way to load the page with fade-in effect using jQuery. Movind forward based on that tutorial today we learn how to make a simple site pre-loader with CSS and jQuery.

In the earlier tutorial we made the container hidden using display: none which caused the editor mess-up after loading the page. So, keeping that in mind we will not hide the page using display: none. We will use another trick to accomplish the job . Moving forward to the tutorial:

We will create our preloader in a div at the top of the site. The size of the div will be full screen (width: 100%, height: 100%) and the main page will be loading below the div.

Now the hiding part:
The remaining half-loaded page will easily be seen scrolling down. As we can't use display: none to the total page, we will just hide the overflow so that only full page loader remains visible and the user loses access to the remaining page. So, at the first hand, open your global.css. Find at the very beginning:

body {

and add just after that:

  overflow: hidden;

Save it. (let the global.css opened as we will need it again later).

OK. Now we will create the full screen preloader div. Open your header template:

ACP > Templates & Styles > Templates > {your_theme_name} Templates > Header Templates > header

Locate the code at the very beginning:

<a name="top" id="top"></a>

and add just after that:

<div id="preloader">
  <div id="spinblock">
    <img id="spinner" src="images/spinner_big.gif" alt="" />
  </div>
</div>

We have used MyBB's default spinner animation file. You may like to use your own spinner. Just change the file path in that case.

Save the header template.

Now we will do the sizing and positioning part in CSS. I'm commenting in the CSS for easy understanding of every line. Go back to your global.css and add at the end:

#preloader {
  position:fixed; /* These 3 lines will set the preloader area fixed at the top in case overflow fails to hide */
  top:0;
  left:0;
  width:100%; /* Set the size of the preloader full screen */
  height:100%;
  background: #fff; /* If you have applied background image, you may use it. But keep the size as small as possible */
  z-index: 9999; /* Set the position of the preloader above all, greater value is more secure */
}

#spinblock {
  width: 75px; /* The spinner image area. Must be greater than the spinner_big.gif's width */
  margin: 250px auto; /* Align the spinner_big.gif at the middle of the screen */
}

#spinner {
  display: block;
  margin: auto auto;
}

Save the global.css.

Now the jQyery part. We will load the jQuery library and define spinner function. Open the headerinclude template:

ACP > Templates & Styles > Templates {your_theme_name} Templates > Ungrouped Templates > headerinclude

Locate the code:

{$stylesheets}

Include the jQuery library before that:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>

In the same template locate the code:

{$newpmmsg}

and add our function after that:

<script type="text/javascript">
jQuery.noConflict();
jQuery(window).load(function() {
  jQuery('#preloader').fadeOut(300, function() {
    jQuery('body').css('overflow','visible');
    jQuery(this).remove();
  });
});
</script>

Watch that the overflow of the body will set back to visible after page load by this function.
Save the template. You are done. Now see what happens in your site

Note: This tutorial is written keeping the newbies in mind. Apology to experts, I'm sure you can grab the gist of this guide in a second and can customize as you wish.

Happy coding ...

I actually really like this! It would look perfect on a mobile theme, but i may add this to my current theme as well

Thanks for the tutorial, I have installed the two effects in my forum

You should get other :p

any demo bro ?

Not live right now.
But you can apply and see what happens, its a little work.

nice tutorial

one question how to see it at the middle of my forum...

Adjust in CSS:

#spinblock {
....
margin: 250px auto;

250px is the pixel distance from the top.

(2012-10-21, 04:55 AM)effone Wrote: [ -> ]Adjust in CSS:

#spinblock {
....
margin: 250px auto;

250px is the pixel distance from the top.

sorry i cannot see in my global css huhuhhhu

Its in the code of this tutorial that you suppose to add in global.css.

i just remove it

it will slow my site huhuhhuhu