jQuery Plugin To Preload Images And Web Content - sPreLoader

sPreLoader is a simple, lightweight jQuery plugin that displays a fullscreen preloader with a percentage indicator while pre-loading images and content of your webpage.

How to use it:

1. Load jQuery and the jQuery sPreloader plugin at the end of the document to improve the page load time.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="js/sPreloader.js"></script>

2. The required html markup for the preloader.

<div id="main-preloader" class="main-preloader semi-dark-background">
  <div class="main-preloader-inner center">

      <h1 class="preloader-percentage center">
          <span class="preloader-percentage-text">0</span>
          <span class="percentage">%</span>
      </h1>
      <div class="preloader-bar-outer">
          <div class="preloader-bar"></div> 
      </div>

  </div>
</div>

3. Just call the function and we're done.

$('body').jpreLoader();

4. Default plugin settings.

$('body').jpreLoader({

  // default CSS classes for the preloader
  preMainSection:     '#main-preloader',
  prePerText:         '.preloader-percentage-text',
  preBar:             '.preloader-bar',

  // show percentage value
  showPercentage:     true,

  // enable debug mode
  debugMode:          false,

  // function
  splashFunction:     function() {}
  
});

---

This awesome jQuery plugin is developed by sifulbd. For more Advanced Usages, please check the demo page or visit the official website.