Svelte Loading Bar

A Svelte component for showing a loading bar.


- Demo
- CHANGELOG
- NPM
- GitHub

> [!IMPORTANT]
> The latest version of this package is not compatible with Svelte 4. Please use the version 1.2.0 for Svelte 4 compatibility.

Install

``cmd
pnpm add -D svelte-loading-bar
`

Use it

If you are using SvelteKit, use this inside your +layout.svelte:

`svelte



`

If you are using Svelte (you need to do the logic yourself):

`svelte



`

Customization

`css
--loading-bar-background-color: rgb(0 100 160 / 80%);
--loading-bar-train-background-color: rgb(0 100 220 / 90%);
`

You can use the css variables like this:

`svelte
--loading-bar-background-color="rgb(0 100 160 / 80%)"
--loading-bar-train-background-color="rgb(0 100 220 / 90%)"
/>
`

Or like this:

`svelte



``

---

Source code of the demo examples.