Show Ajax loading animation automatically using Pace

There’s this cool library – Pace which shows cool animations when pages are loading, ajax requests are loading, your SPAs are changing pages etc. The only issue is it doesn’t work for all Ajax requests. Blame the defaults.

You need to define the paceOptions object for setting some defaults before loading the Pace library and that will make it work.

Here is what I am using:

// define options for Pace – ajax progress showing library

paceOptions = {

restartOnRequestAfter:50, // make it work for short AJAX requests only (ajax requests taking longer than 50ms will trigger it)

ajax: {

trackMethods: [ ‘GET‘, ‘POST‘, ‘DELETE‘, ‘PUT‘, ‘PATCH‘ ]

}

};

Discovered the morning after a frustrated purge of hours the night before. Hope it helped you save time!