UDX Pace

by andypotanin

HTML

<script src="http://cdn.udx.io/udx.requires.js"></script>
<div class="my-thing">My Thing</div>
<div class="my-view"></div>

CSS

.pace {
  -webkit-pointer-events: none;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.pace .pace-progress {
  display: block;
  position: fixed;
  z-index: 2000;
  top: 0;
  left: 0;
  height: 12px;
  background: #29d;

  -webkit-transition: -webkit-transform .3s, width 1s;
  -moz-transition: width 1s;
  -o-transform: width 1s;
  transition: transform .3s, width 1s;

  -webkit-transform: translateY(-50px);
  transform: translateY(-50px);

  pointer-events: none;
}

.pace.pace-active .pace-progress {
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

JavaScript

console.clear();
require(['pace'], function (pace) {

    pace.options({
        //target: 'body',
        restartOnPushState: false,
        restartOnRequestAfter: false,
        document: false,
        ajax: {
            ignoredURLs: ['some-substring', /some-regexp/]
        },
        eventLag: false
        // elements: { selectors: ['.my-thing'] }
    });
    
    // pace.stop();

    console.log(pace);
    
});

jQuery( '.my-thing' ).click( function() {
    jQuery( '.my-view' ).load( '/gh/get/response.html', function() {
        console.log( 'asf', arguments );
    }); 
});