From 5a3df2b6839bd4e8bc66187144c9361b5cec7983 Mon Sep 17 00:00:00 2001
From: Kabolobari Benakole <52034326+k16e-me@users.noreply.github.com>
Date: Fri, 26 Jan 2024 13:59:31 +0100
Subject: [PATCH] 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 <94928215+martrapp@users.noreply.github.com>
---
 README.md                    |  4 ++--
 components/ProgressBar.astro | 19 +++++++++++++++++++
 2 files changed, 21 insertions(+), 2 deletions(-)
 create mode 100644 components/ProgressBar.astro

diff --git a/README.md b/README.md
index aebab8b..b267eea 100644
--- a/README.md
+++ b/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.
 
diff --git a/components/ProgressBar.astro b/components/ProgressBar.astro
new file mode 100644
index 0000000..67e5540
--- /dev/null
+++ b/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>
+