Page Preloader

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