[jQuery] Simple Site Preloader with Effect
A user recently asked me for help and it turned out this tutorial was what they were having trouble with so I figured I would simply share how I quickly simply got it working for them on latest mybb and ie: jquery 3 as load was depreciated/removed


find, comment out and add
body {
	/*overflow-y: scroll;*/
        overflow: hidden;

also add:
/** Preloader Spinner by effone and vintagedaddyo **/

#preloader {
  position:fixed; /* These 3 lines will set the preloader area fixed at the top in case overflow fails to hide */
  width:100%; /* Set the size of the preloader full screen */
  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;

Header template find
		<a name="top" id="top"></a>

Add after:
                <!-- Preloader Spinner by effone and vintagedaddyo -->

                <div id="preloader">
                 <div id="spinblock">
                   <img id="spinner" src="{$theme['imgdir']}/spinner_big.gif" alt="" />
                   <!-- optional lang text to expand upon if so desired later-->
                   <!-- {$lang->ajax_loading} -->

Headerinclude template add *
<!-- Preloader Spinner by effone and vintagedaddyo -->

<script type = "text/javascript" >
    $(window).on('load', function() {
      $('#preloader').delay(1000).fadeOut(400, 'linear', function() {
            $('body').css('overflow', 'visible');

* one can simply modify delay and fadeout milliseconds to your desired needs

Messages In This Thread
RE: [jQuery] Simple Site Preloader with Effect - by User 6029 - 2020-02-28, 06:45 PM

Forum Jump:

Users browsing this thread: 1 Guest(s)