swup swup Progress Bar Plugin
GitHub swup on GitHub

Progress Bar Plugin

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.