Swup Progress Bar Plugin

A swup plugin for displaying a progress bar.

Shows a loading indicator for requests taking longer than ~300ms.

Installation

Install the plugin from npm and import it into your bundle.

``bash
npm install @swup/progress-plugin
`

`js
import SwupProgressPlugin from '@swup/progress-plugin';
`

Or include the minified production file from a CDN:

`html

`

Usage

To run this plugin, include an instance in the swup options.

`javascript
const swup = new Swup({
plugins: [new SwupProgressPlugin()]
});
`

Styling

The progress bar has a class name of swup-progress-bar you can use for styling.

`css
.swup-progress-bar {
height: 4px;
background-color: blue;
}
`

Options

`javascript
{
className: 'swup-progress-bar',
transition: 300,
delay: 300,
initialValue: 0.25,
finishAnimation: true
}
`

$3

Class name to use for the container div.

$3

Length of the CSS transition between loading states, in milliseconds.

$3

How long to wait before showing the progress bar, in milliseconds.

Set to 0 to always display the progress bar, even on fast requests.

$3

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.

$3

Whether the progress bar will complete the transition to 100% before hiding.