page transition module

page-transitions.js

// module pageTransitions
var pageTransitions = ( function() {

    var settings = {
        duration: 500,
        selector: 'a[href^="' + globals.blogurl + '"]:not([data-page-transition="ignore"])'
    };

    var init = function() {
        $( 'html' )
            .addClass( 'page-transitions' );

        buildLoadingIndicator();
        bindEventHandlers();
    }

    var bindEventHandlers = function() {

        // break BF Cache
        $( window )      
            .on( 'unload', function( e ) {

            } );

        $( document )
            .on( 'mousedown', settings.selector, function( event ) {
                // left click only
                if( event.button === 0 ) {
                    onClick( $( this ), e );
                }
            } );
    }

    var onClick = function( element, event ) {
        var href = element.attr( 'href' );
        hrefDiff = href.split( '#' );
        hrefDiff = hrefDiff[0];
        if( hrefDiff[hrefDiff.length - 1] == '/' ) {
            hrefDiff = hrefDiff.substr( 0, ( hrefDiff.length - 1 ) );
        }

        var locationDiff = window.location.href;
        locationDiff = locationDiff.split( '#' );
        locationDiff = locationDiff[0];
        if( locationDiff[locationDiff.length - 1] === '/' ) {
            locationDiff = locationDiff.substr( 0, ( locationDiff.length - 1 ) );
        }                        

        if( locationDiff !== hrefDiff ) {
            event.preventDefault();

            $( 'html' )
                .addClass( 'page-transitioning' );

            setTimeout( function() {
                window.location = href;                            
            }, settings.duration );
        }
    }

    var buildLoadingIndicator = function() {
        var indicator = $( '<span class="loading-indicator"></span>' );

        indicator
            .appendTo( $( 'body' ) );
    }

    return {
        init: function() { init(); }
    }     
} )();        

page-transitions.less

.js {

	& .loading-indicator {
		position: fixed;
		left: 50%;
		top: 50%;
		z-index: 1000;
		
		display: block;
		width: 4rem;
		height: 4rem;
		margin: -2rem 0 0 -2rem;
		
		opacity: 0;
		pointer-events: none;
		
		transition-property: opacity;
		transition-duration: 500ms; 
		transition-timing-function: ease;		
	}
    
    // content to hide on page transitions
	& .content {
		animation: fadeIn 500ms 1 ease;
		animation-fill-mode: backwards;

		transition-property: opacity;
		transition-duration: 500ms;
        transition-timing-function: ease;
	}

	&.page-transitioning {

		& .loading-indicator {
			opacity: 1;
		}

		& .content {
		    opacity: 0;
		}		
	}
}

@keyframes fadeIn {
	0% {
		opacity: 0;
	}
  
	100% {
		opacity: 1;
	}
}

@keyframes fadeOut {
	0% {
		opacity: 1;
	}
  
	100% {
		opacity: 0;
	}
}