astro-loading-indicator
v0.7.0
Published
Display a progress bar between page navigations when using View Transitions
Downloads
3,238
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;
threshold?: 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"
/>To override the default styles provided by the component, you can use global styles with higher specificity.
<style is:global>
:root .astro-loading-indicator {
top: 45px;
z-index: 2000;
}
</style>animationDuration
The animation duration, in ms. Defaults to 300.
<LoadingIndicator
color="..."
animationDuration={500}
/>threshold
If the page loads in less than the specified duration (in ms), the indicator will not be shown. It can be set to false to always show it. Defaults to 200.
<LoadingIndicator
color="..."
threshold={600}
// threshold={false}
/>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.