+import astroLoadingIndicator from "astro-loading-indicator";

export default defineConfig({
  integrations: [
+    astroLoadingIndicator({ ... }),
  ],
});

Component

Install the package manually:

Install the required dependencies

pnpm add astro-loading-indicator

npm install astro-loading-indicator

yarn add astro-loading-indicator

Add the component to your main layout:

---
import { ViewTransitions } from "astro:transitions";
+import { LoadingIndicator } from "astro-loading-indicator"

---
<!doctype html>
<html>
  <head>
  	<ViewTransitions />
+		<LoadingIndicator />
  </head>
</html>

Configuration

Here is the TypeScript type:

export type Options = {
    color: string;
    height?: string;
}

`color`

The indicator background color. Can be any valid CSS property.

import { defineConfig } from "astro/config";
import astroLoadingIndicator from "astro-loading-indicator";

export default defineConfig({
  integrations: [
    astroLoadingIndicator({ 
      color: "#7e22ce",
      // color: "red",
      // color: "var(--myColor)"
     }),
  ],
});

<LoadingIndicator
  color="#7e22ce"
  // color="red"
  // color="var(--myColor)"
/>

`height`

The indicator height. Can be any valid CSS property. Defaults to "2px".

import { defineConfig } from "astro/config";
import astroLoadingIndicator from "astro-loading-indicator";

export default defineConfig({
  integrations: [
    astroLoadingIndicator({
      // ...
      height: "1rem",
     }),
  ],
});

<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 22 Jan 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