[jQuery] Simple Site Preloader with Effect
#16
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

Global.css

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 */
  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;
}

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} -->
                   </div>
                 </div>

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');
            $(this).remove();
        });
    }); 
</script>

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


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)