---
import { ClientRouter } from "astro:transitions";
+import LoadingIndicator from "astro-loading-indicator/component"

---
<!doctype html>
<html>
  <head>
  	<ClientRouter />
+		<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:

playground contains code for testing the package
package contains the actual package

Install 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.

Licensing

MIT Licensed. Made with ❤️ by Florian Lefebvre.

Keywords

astro-component

withastro

astro

FAQs

What is astro-loading-indicator?

Is astro-loading-indicator popular?

Is astro-loading-indicator well maintained?

Package last updated on 20 Oct 2025

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.

Install

astro-loading-indicator

Usage

Prerequisites

Installation

Configuration

color

height

class

animationDuration

threshold