How do I append Pace.js to a custom location in the DOM?

I'm using Pace.js (http://github.hubspot.com/pace/) for a basic loader.

It works great with no issues so far. However, what I would like to do, is append the Pace.js HTML to be inside an element of my choice.

The generated HTML looks like:

<div class="pace  pace-inactive">
    <div class="pace-progress" data-progress-text="100%" data-progress="99" style="transform: translate3d(100%, 0px, 0px);">
        <div class="pace-progress-inner"></div>
    </div>
    <div class="pace-activity"></div>
</div>

By default, Pace.js appends itself to be just after the opening <body> tag. Is there any way to hook into where this generated HTML goes?

Solution

Okay, so I figured this out. It seems to be undocumented.

In the plugins options object, there is a value for the target key.

Default options look like:

defaultOptions = {
    catchupTime: 500,
    initialRate: .03,
    minTime: 500,
    ghostTime: 500,
    maxProgressPerFrame: 10,
    easeFactor: 1.25,
    startOnPageLoad: true,
    restartOnPushState: true,
    restartOnRequestAfter: 500,
    target: 'body',
    elements: {
      checkInterval: 100,
      selectors: ['body']
    },
    eventLag: {
      minSamples: 10,
      sampleCount: 3,
      lagThreshold: 3
    },
    ajax: {
      trackMethods: ['GET'],
      trackWebSockets: true,
      ignoreURLs: []
    }
  };

In my project, I am using Browserify, so here's how I achieved this:

var pace = require('../plugins/pace');
pace.options.target = '#main';
pace.start();

This effectively overwrites the target key in the default options used by Pace.js.

Seems to work fine now. Hope this helps someone else out there.