Smoothly Transition Between Pages With A Loader - jQuery fakeloader

The fakeloader jQuery plugin lets you create smooth fade in/out transitions with a loading indicator when switching between pages of your website.

The goal of this plugin to make your normal website behavior like a single page web app that smoothly transitions between pages to enhance the user experience.

Also works with the jQuery waitForImages plugin that displays the loading indicator when the images are completely loaded.

How to use it:

1. Load the stylesheet fakeloader.css for the basic styling of the loading indicator (loading overlay & loading spinner).

<link rel="stylesheet" href="fakeloader.css">

2. Create the HTML for the loading indicator.

<div id="fakeloader-overlay" class="visible incoming">
  <div class="loader-wrapper-outer">
    <div class="loader-wrapper-inner">
      <div class="loader"></div>
    </div>
  </div>
</div>

3. Load the JavaScript fakeloader.js after jQuery.

<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous"></script>
<script src="fakeloader.min.js"></script>

4. Initialize the plugin on document ready. Done.

$(function(){

  window.FakeLoader.init();

});

5. Determine whether to auto hide the loading indicator (Default: true).

window.FakeLoader.init({
  auto_hide: true
});

6. Customize the duration of the fade animation.

window.FakeLoader.init({
  fade_timeout: 200
});

7. Customize the selector the loading indicator.

window.FakeLoader.init({
  overlay_id: 'fakeloader-overlay'
});

8. Config the plugin when working with the jQuery waitForImages plugin.

window.FakeLoader.init({
  wait_for_images: true,
  wait_for_images_selector: 'body'
});

---

This awesome jQuery plugin is developed by jimkeller. For more Advanced Usages, please check the demo page or visit the official website.