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