This swup plugin will display a progress bar for all requests taking longer than ~300ms.
More or less a port of Turbolink's implementation.
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 progressbar 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
}
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.