Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

test pr with new progress bar div #7

Merged
merged 7 commits into from
Jan 26, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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.

Expand Down
19 changes: 19 additions & 0 deletions components/ProgressBar.astro
Original file line number Diff line number Diff line change
@@ -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>

Loading