astro-loading-indicator
Advanced tools
Display a progress bar between page navigations when using View Transitions
astro-loading-indicatorThis is an Astro integration that displays a progress bar between page navigations when using View Transitions.
Install the package manually:
pnpm add astro-loading-indicator
npm install astro-loading-indicator
yarn add astro-loading-indicator
---
import { ViewTransitions } from "astro:transitions";
+import LoadingIndicator from "astro-loading-indicator/component"
---
<!doctype html>
<html>
<head>
<ViewTransitions />
+ <LoadingIndicator />
</head>
</html>
Here is the TypeScript type:
export type Props = {
color: string;
height?: string;
class?: string;
animationDuration?: number;
threshold?: number;
}
colorThe indicator background color. Can be any valid CSS property.
<LoadingIndicator
color="#7e22ce"
// color="red"
// color="var(--myColor)"
/>
heightThe indicator height. Can be any valid CSS property. Defaults to "2px".
<LoadingIndicator
color="..."
height="1rem"
/>
classThe 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>
animationDurationThe animation duration, in ms. Defaults to 300.
<LoadingIndicator
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.
<LoadingIndicator
color="..."
threshold={600}
// threshold={false}
/>
This package is structured as a monorepo:
playground contains code for testing the packagepackage contains the actual packageInstall dependencies using pnpm:
pnpm i --frozen-lockfile
Start the playground:
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.
FAQs
Display a progress bar between page navigations when using View Transitions
The npm package astro-loading-indicator receives a total of 1,132 weekly downloads. As such, astro-loading-indicator popularity was classified as popular.
We found that astro-loading-indicator demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Meet Socket at Black Hat & DEF CON 2025 for 1:1s, insider security talks at Allegiant Stadium, and a private dinner with top minds in software supply chain security.
Security News
CAI is a new open source AI framework that automates penetration testing tasks like scanning and exploitation up to 3,600× faster than humans.
Security News
Deno 2.4 brings back bundling, improves dependency updates and telemetry, and makes the runtime more practical for real-world JavaScript projects.