---
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;
}

`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"
/>

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.

Acknowledgements

https://github.com/rstacruz/nprogress

Keywords

FAQs

What is astro-loading-indicator?

Is astro-loading-indicator popular?

Is astro-loading-indicator well maintained?

Package last updated on 20 Feb 2024

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