swup-progress-plugin v0.1.2

Swup Progress Bar Plugin

This swup plugin will display a progress bar for all requests taking longer than ~300ms.

More or less a port of Turbolink's implementation.

Installation

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>

Usage

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

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

Styling

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

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

Options

{
  className: 'swup-progress-bar',
  transition: 300,
  delay: 300
}

className

Class name to use for the container div.

transition

Length of CSS transition between loading states, in milliseconds.

delay

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

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