This swup plugin will display a progress bar for all requests taking longer than ~300ms.
This plugin can be installed with npm
npm install @swup/progress-plugin
and included with import
import SwupProgressPlugin from '@swup/progress-plugin';
or included from the dist folder
<script src="./dist/SwupProgressPlugin.js"></script>
To run this plugin, include an instance in the swup options.
const swup = new Swup({
plugins: [new SwupProgressPlugin()]
});
The progress bar has a class name of swup-progress-bar
you can use for styling.
.swup-progress-bar {
height: 4px;
background-color: blue;
}
{
className: 'swup-progress-bar',
transition: 300,
delay: 300,
initialValue: 0.25,
hideImmediately: true
}
Class name to use for the container div.
Length of CSS transition between loading states, in milliseconds.
How long to wait before showing the progress bar, in milliseconds.
Set to 0
to always display the progress bar, even on fast requests.
To create a slightly more "realistic" appearance, the progress bar will start
out at a random position beteen 0 and the value of this option. Set to 0
to
always start from the left.
Whether the progress bar is hidden instantly after a page visit.
Set to false
to always complete the transition to width: 100%
before hiding it.