https://github.com/swup/progress-plugin
A swup plugin for displaying a progress bar ⏳
https://github.com/swup/progress-plugin
loading-indicator page-transitions plugin progress-bar swup
Last synced: about 1 month ago
JSON representation
A swup plugin for displaying a progress bar ⏳
- Host: GitHub
- URL: https://github.com/swup/progress-plugin
- Owner: swup
- License: mit
- Created: 2020-07-30T19:00:28.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2026-03-01T18:49:30.000Z (about 1 month ago)
- Last Synced: 2026-03-01T20:51:28.707Z (about 1 month ago)
- Topics: loading-indicator, page-transitions, plugin, progress-bar, swup
- Language: TypeScript
- Homepage: https://swup.js.org/plugins/progress-plugin
- Size: 638 KB
- Stars: 7
- Watchers: 2
- Forks: 5
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Swup Progress Bar Plugin
A [swup](https://swup.js.org) 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
}
```
### className
Class name to use for the container div.
### transition
Length of the 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.
### finishAnimation
Whether the progress bar will complete the transition to 100% before hiding.