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

pnpm add -D svelte-loading-bar

Use it

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

<script>
    import { LoadingBar } from "svelte-loading-bar"
</script>

<LoadingBar />

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

<script>
    import { LoadingBarUi } from "svelte-loading-bar"
</script>

<LoadingBarUi />

Customization

--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:

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

Or like this:

<LoadingBarUi classLoadingBar="my-loading-bar" />

<style>
    :global(.my-loading-bar) {
        --loading-bar-background-color: rgb(0 100 160 / 80%);
        --loading-bar-train-background-color: rgb(0 100 220 / 90%);
    }
</style>

Source code of the demo examples.