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

Question

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?

score 5 · Accepted Answer · answered Mar 01 '16 at 11:33

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.

score 1 · Answer 2 · answered Jul 22 '17 at 19:36

Okay, so I figured this out. It seems to be undocumented. In the plugins options object, there is a value for the target key.

I know it's an old thread, but I want to expand Michael's answer above mine, I managed to use Pace.js more effectively by settings:

pace.options.target = 'body:not(.pace-ignore)';

This way I can choose the elements I don't want monitored by pace (such as ads).

score 0 · Answer 3 · answered Oct 26 '18 at 11:24

Because most of pace.js's CSS makes it's position fixed, it won't be of much help only to append it to a specific element.

This is the solution to have it fill an element:

In your index.html:

<nav style="background-color: transparent; height: 5px; position: sticky; top: 0; z-index:10" id="pace-nav"></nav>
<script src="~/lib/PACE/pace.js" data-pace-options='{ "target": "#pace-nav" }'>

And in your less file:

// main: ../main.less
@import (less) "../../../node_modules/pace-progress/themes/blue/pace-theme-minimal.css";

.pace .pace-progress {
  background: #2299dd;
  position: relative;
  z-index: 2000;
  right: 100%;
  width: 100%;
  height: 5px;
}

Mohsin Shoukat · Answer 4 · 2019-09-05T08:18:50.883

-2

open css file of pace and you can change it's position by changing top : 7% !important

.pace .pace-progress {
  background: #29d;
  position: fixed;
  z-index: 2000;
  top: 7% !important;
  right: 100%;
  width: 100%;
  height: 2px;
}

edited Sep 05 '19 at 08:18

answered Apr 27 '17 at 06:49

Mohsin Shoukat

1,190
1
13
22

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

4 Answers4