How to add loader to SmoothState.Js page change

Question

I need page loader to every page when all the contents are fully loaded.

What I need :

$(window).load(function(){
   $('#loading').fadeOut();
});

Is there any solution to use this simple function to each pages when changes by SmoothState.Js

Here is what I tried but not working :

onAfter: function($container, $newContent){
  $(window).load(function(){
   $('#loading').fadeOut();
 });
}

Extricate · Answer 1 · 2017-01-29T19:58:19.027

I had a similar question and spent quite some time looking for a solution. Eventually, I decided to just come up with a solution myself, but instead of using JS to append it to SmoothState itself, I used a CSS solution. I hope this helps you and possibly others looking for the same.

My SmoothState is configured as following:

jQuery(function(){
  'use strict';
  var $page = jQuery('#smoothStateMain'),
      options = {
        debug: true,
        anchors: 'a',
        blacklist: 'no-ajax',
        prefetch: true,
        prefetchOn: 'mouseover touchstart',
        cacheLength: 5,
        forms: 'form',
        onStart: {
          duration: 50, // Duration of our animation
          render: function ($container) {
            // Add your CSS animation reversing class
            $container.addClass('is-exiting');
            // Restart your animation
            smoothState.restartCSSAnimations();
          }
        },
        onReady: {
          duration: 0,
          render: function ($container, $newContent) {
            // Remove your CSS animation reversing class
            $container.removeClass('is-exiting');
            // Inject the new content
            $container.html($newContent);
          }
        }
      },
      smoothState = $page.smoothState(options).data('smoothState');

});

This obviously is a rather normal SmoothState configuration that adds 'is-exiting' to the m-scene classed container upon a page transition.

This is my HTML:

<body id="body">
    <div id="smoothStateMain" class="m-scene">
        <div class="loading"></div>
        <!-- Start body_class again for smoothState reload -->
        <div <?php body_class(''); ?>>

To show and hide the loading icon, I have the following CSS:

@keyframes loading{
   0%{transform:rotate(0deg)}
   100%{transform:rotate(360deg)}
}

@-webkit-keyframes loading{
   0%{-webkit-transform:rotate(0deg)}
   100%{-webkit-transform:rotate(360deg)}
}

.m-scene.is-exiting .loading {
   /* Show loader when there's no page transition */
   display: block
}

.m-scene .loading {
   /* Hide loader when there's no page transition */
   display: none;
}

.loading {
   /* Your loader style here */
   animation-duration: .5s;

   /* Some general styling */
   width: 30px;
   height: 30px;
   border-radius: 150px;
   border: 2px solid #000;
   border-top-color: rgba(0, 0, 0, 0.3);
   box-sizing: border-box;
   position: absolute;
   top: 10%;
   right: 10%;
   animation: loading 1s linear infinite;
   -webkit-animation: loading 1s linear infinite;

   /* To show the loader over any other elements */
   z-index: 9999;
}

Excuse me for any bad-StackOverflow-habits, this is my very first entry. The CSS animation allows for a lot more functions. For example, you might want to delay the display of the loader for a couple of milliseconds to prevent it from showing when your website insta-load a page (so that it doesn't flicker or show for a very short amount of time).

Good luck!

score 1 · Answer 2 · answered Feb 02 '17 at 21:03

To add a loader between page transitions, as per the documentation of the plugin you need to use the hook onProgress.

First add a loader's HTML and CSS to the part of the page that is not updatable e.g to the header or footer, here are some a nice pure CSS3 loaders, then hide it in your css with display: none:

.spinner{
    display: none;
}

Now you want to show the loader only during the onProgress as follows:

onProgress: {
            // How long this animation takes
            duration: 0,
            // A function that dictates the animations that take place
            render: function ($container) {
               $('.spinner').show(100);
            }
        },

You're good to go! Remember that the loader won't show unless the Ajax loading takes time (when it is slow)

How to add loader to SmoothState.Js page change

2 Answers2