Merge pull request #27 from swup/next

Update for swup 4

CHANGELOG.md

@@ -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

readme.md → README.md

@@ -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
@@ -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
 }
 ```
 
@@ -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
 
@@ -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.