Skip to content

Commit

Permalink
Merge pull request #27 from swup/next
Browse files Browse the repository at this point in the history
Update for swup 4
  • Loading branch information
daun authored Jul 26, 2023
2 parents ce7d11a + 86fb9de commit 5c27eaf
Show file tree
Hide file tree
Showing 8 changed files with 143 additions and 575 deletions.
35 changes: 35 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
# Changelog

<!-- ## [Unreleased] -->

## [3.0.0] - 2023-07-26

- Finish animation by default
- Update for swup 4 compatibility

## [2.0.0] - 2023-03-10

- Switch to microbundle
- Export native ESM module

## [1.2.0] - 2022-08-01

- Ensure width never exceeds 100%
- Initialise with random value to improve appearance
- Improve initial transition by forcing reflow

## [1.1.0] - 2022-03-08

- Finish the animation before hiding the progress bar

## [1.0.0] - 2020-08-10

- Initial release

[Unreleased]: https://github.com/swup/progress-plugin/compare/3.0.0...HEAD

[3.0.0]: https://github.com/swup/progress-plugin/releases/tag/3.0.0
[2.0.0]: https://github.com/swup/progress-plugin/releases/tag/2.0.0
[1.2.0]: https://github.com/swup/progress-plugin/releases/tag/1.2.0
[1.1.0]: https://github.com/swup/progress-plugin/releases/tag/1.1.0
[1.0.0]: https://github.com/swup/progress-plugin/releases/tag/1.0.0
26 changes: 12 additions & 14 deletions readme.md → README.md
Original file line number Diff line number Diff line change
@@ -1,26 +1,26 @@
# Swup Progress Bar Plugin

This [swup](https://github.com/swup/swup) plugin will display a progress bar for
all requests taking longer than ~300ms.
A [swup](https://swup.js.org) plugin for displaying a progress bar.

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


## Installation

This plugin can be installed with npm
Install the plugin from npm and import it into your bundle.

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

and included with import

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

or included from the dist folder
Or include the minified production file from a CDN:

```html
<script src="./dist/SwupProgressPlugin.js"></script>
<script src="https://unpkg.com/@swup/progress-plugin@3"></script>
```

## Usage
Expand Down Expand Up @@ -52,7 +52,7 @@ The progress bar has a class name of `swup-progress-bar` you can use for styling
transition: 300,
delay: 300,
initialValue: 0.25,
hideImmediately: true
finishAnimation: true
}
```

Expand All @@ -62,7 +62,7 @@ Class name to use for the container div.

### transition

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

### delay

Expand All @@ -76,8 +76,6 @@ 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.
### finishAnimation

Set to `false` to always complete the transition to `width: 100%` before hiding it.
Whether the progress bar will complete the transition to 100% before hiding.
Loading

0 comments on commit 5c27eaf

Please sign in to comment.