Use two different Pace.js progress bars on the same page
I came across this problem while working on my little side project Strafforts (A Visualizer for Strava Estimated Best Efforts and Races), that how to have two different Pace.js progress bars on the same page within a single page application.
One progress bar is a global overlay that hides the entire application until the page is loaded, while the other is a default progress bar when any Ajax is triggered without hiding any content.
After some Googling, I found this answer works like a charm. Hence I'm turning it into a simple working demo for anyone is interested.
Demo
Add first progress bar
First, add an ordinary Pace.js progress bar like usual.
- Add references to
pace.min.js
and the theme CSS file.
- Optionally, I want this one to be used as a global overlay, which means nothing but this progress bar is shown before page has fully loaded.
Add second progress bar
Next step is to add another progress bar that will be shown inside application only, when there are Ajax calls, state changes, etc.
Make them working together
- Set page states
To indicate what the state the page is currently in and which progress bar should be shown, add a class name on body
element of the page.
For example, add .content-loading
class to body
in HTML markup, which indicates the page hasn't been loaded and is in the initial state.
Then add a piece of JavaScript code to set page state (.content-loading
class on body
) to .content-loaded
when Pace.js finishes page loading. Once this is executed, the in-app progress bar will be shown from then on for Ajax calls, etc.
- Wrap themes with unique class names
Now the page has two states, one is the initial state where the first progress bar will be shown. The other state is when page has been loaded, the second progress bar will be shown for any Ajax calls, etc. within the application.
Therefore CSS themes need to be updated accordingly to reflect those two states.
If you are using CSS, update all CSS rules in both themes to be under .content-loading
or .content-loaded
. For example, minimal.css
now looks like:
If you are using Sass, simply wrap themes with the class names like below:
- Update overlay styles
If global overlay style in place, the last step is to update it for .content-loading
state only. So that content in the application will still be visible during Ajax calls.
Demo's source code
See demo's on JSFiddle here.