@mgjules/swup-progress-plugin
v1.3.0
Published
Swup plugin for displaying a loading indicator
Downloads
20
Readme
Swup Progress Bar Plugin
by daun
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 @mgjules/swup-progress-plugin
and included with import
import SwupProgressPlugin from '@mgjules/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
{
containerSelector: '#swup-progress-bar-container',
className: 'swup-progress-bar',
transition: 300,
delay: 300,
initialValue: 0.25,
hideImmediately: true
}
containerSelector
CSS Selector of container to append progress bar element as child. If empty, the progress bar will be added before the body element.
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.
initialValue
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.
hideImmediately
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.