test pr with new progress bar div (#7)

* updated readme with intents

* Added Progressbar comp, just for test push

* Update ProgressBar.astro

Finally got swup bar technically working.

* Update README.md

---------

Co-authored-by: Martin Trapp <[email protected]>

README.md

@@ -22,7 +22,7 @@ A current deployment of tech demos and the documentation can be found at https:/
 * Wanting support in understanding and debugging view transitions or simply want a second pair of eyes on your view transition settings?
 * Looking for reusable animations or special transition effects?
 
-The `astro-vtbot`package isn't a monolithic library. Use the components you need and only pay bandwidth for those. 
+The `astro-vtbot`package isn't a monolithic library. Use the components you need and only pay bandwidth for those.
 |Component|Brotli bytes added|
 |-------|-----------------|
 Linter 🧹 |~2k
@@ -46,7 +46,7 @@ Visit [the documentation](https://events-3bg.pages.dev/components/) of the reusa
 
 - `Zoom` and `Swing` animations and the `<AnimationsStyle/>` component allows for extended styling options.
 
-- `<Portal/>` component that forces all view transitions through a portal/loading page. 
+- `<Portal/>` component that forces all view transitions through a portal/loading page.
 
 - `<NoScroll/>` keep the current vertical and horizontal scroll position when transitioning to the next page.
 

components/ProgressBar.astro

@@ -0,0 +1,19 @@
+---
+---
+<script>
+  import "https://unpkg.com/@swup/progress-plugin@3"
+	import { loading } from 'astro-vtbot/components/loading-indicator';
+
+	//@ts-ignore
+	const plugin = new SwupProgressPlugin();
+
+	document.addEventListener('astro:after-swap', () => plugin.progressBar.installStyleElement());
+
+	loading(() => plugin.startShowingProgress(), () => plugin.stopShowingProgress());
+</script>
+
+<style is:global>
+	.swup-progress-bar {
+	}
+</style>
+