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.

HTML

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