astro-loading-indicator
v0.4.0
Published
Display a progress bar between page navigations when using View Transitions
Downloads
560
Maintainers
florian-lefebvreReadme
astro-loading-indicator
This is an Astro integration that displays a progress bar between page navigations when using View Transitions.
Usage
Prerequisites
- View Transitions enabled on the whole site, view docs.
Installation
Install the package manually:
- Install the required dependencies
pnpm add astro-loading-indicatornpm install astro-loading-indicatoryarn add astro-loading-indicator- Add the component to your main layout:
---
import { ViewTransitions } from "astro:transitions";
+import LoadingIndicator from "astro-loading-indicator/component"
---
<!doctype html>
<html>
<head>
<ViewTransitions />
+ <LoadingIndicator />
</head>
</html>Configuration
Here is the TypeScript type:
export type Props = {
color: string;
height?: string;
class?: string;
animationDuration?: number;
}color
The indicator background color. Can be any valid CSS property.
<LoadingIndicator
color="#7e22ce"
// color="red"
// color="var(--myColor)"
/>height
The indicator height. Can be any valid CSS property. Defaults to "2px".
<LoadingIndicator
color="..."
height="1rem"
/>class
The indicator element class. Defaults to "astro-loading-indicator".
<LoadingIndicator
color="..."
class="custom-indicator-class"
/>animationDuration
The animation duration, in ms. Defaults to 300.
<LoadingIndicator
color="..."
animationDuration={500}
/>Contributing
This package is structured as a monorepo:
playgroundcontains code for testing the packagepackagecontains the actual package
Install dependencies using pnpm:
pnpm i --frozen-lockfileStart the playground:
pnpm playground:devYou can now edit files in package. Please note that making changes to those files may require restarting the playground dev server.
Licensing
MIT Licensed. Made with ❤️ by Florian Lefebvre.
Acknowledgements
- https://swup.js.org/plugins/progress-plugin/