2.0.4 • Published 10 months ago

svelte-loading-bar v2.0.4

Weekly downloads
-
License
MIT
Repository
github
Last release
10 months ago

Svelte Loading Bar

A Svelte component for showing a loading bar.

NPM

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

2.0.3

10 months ago

2.0.2

10 months ago

2.0.4

10 months ago

1.3.0

10 months ago

2.0.1

10 months ago

2.0.0

10 months ago

1.2.0

1 year ago

1.1.0

2 years ago

1.0.1

2 years ago

1.0.0

2 years ago

0.0.5

2 years ago

0.0.6

2 years ago

0.0.4

2 years ago

0.0.3

2 years ago

0.0.2

2 years ago

0.0.1

2 years ago