Page Preloader

A simple and easy page preloading effects.

About

For websites, where it's crucial to load all or part of the assets, these kind of preloader screens can be a creative way to make waiting a bit less boring for the visitor.

How to use?

Copy-paste the init function under JS Plugins Init., before the closing </body> tag, to enable it.

<script>
  $(document).on('load', function () {
    // Page preloader
    setTimeout(function() {
      $('#jsPreloader').fadeOut(500)
    }, 1000)
  });
</script>
Copy

Basic example

You can use any of the Bootstrap Spinners example as a loading animation effect.

<!-- Page Preloader -->
<div id="jsPreloader" class="page-preloader">
  <div class="page-preloader-content-centered">
    <div class="spinner-grow text-primary" role="status">
      <span class="sr-only">Loading...</span>
    </div>
  </div>
</div>
<!-- End Page Preloader -->
Copy