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>
              
            

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 -->