Display a progress bar between page navigations when using View Transitions
npm install astro-loading-indicatorastro-loading-indicatorThis is an Astro integration that displays a progress bar between page navigations when using View Transitions.
- View Transitions enabled on the whole site, view docs.
Install the package manually:
1. Install the required dependencies
``bash`
pnpm add astro-loading-indicator
`bash`
npm install astro-loading-indicator
`bash`
yarn add astro-loading-indicator
2. Add the component to your main layout:
`diff
---
import { ClientRouter } from "astro:transitions";
+import LoadingIndicator from "astro-loading-indicator/component"
---
$3
Here is the TypeScript type:
`ts
export type Props = {
color: string;
height?: string;
class?: string;
animationDuration?: number;
threshold?: number;
}
`####
colorThe indicator background color. Can be any valid CSS property.
`tsx
color="#7e22ce"
// color="red"
// color="var(--myColor)"
/>
`####
heightThe indicator height. Can be any valid CSS property. Defaults to
"2px".`tsx
color="..."
height="1rem"
/>
`####
classThe indicator element class. Defaults to
"astro-loading-indicator".`tsx
color="..."
class="custom-indicator-class"
/>
`To override the default styles provided by the component, you can use global styles with higher specificity.
`astro
`####
animationDurationThe animation duration, in ms. Defaults to
300.`tsx
color="..."
animationDuration={500}
/>
`####
thresholdIf 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.`tsx
color="..."
threshold={600}
// threshold={false}
/>
`Contributing
This package is structured as a monorepo:
-
playground contains code for testing the package
- package contains the actual packageInstall dependencies using pnpm:
`bash
pnpm i --frozen-lockfile
`Start the playground:
`bash
pnpm playground:dev
`You can now edit files in
package`. Please note that making changes to those files may require restarting the playground dev server.MIT Licensed. Made with ❤️ by Florian Lefebvre.