1.2.0 • Published 3 months ago

svelte-loading-bar v1.2.0

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

Svelte Loading Bar

A Svelte component for showing a loading bar.

NPM

Demo

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.

1.2.0

3 months ago

1.1.0

3 months ago

1.0.1

5 months ago

1.0.0

5 months ago

0.0.5

12 months ago

0.0.6

9 months ago

0.0.4

1 year ago

0.0.3

1 year ago

0.0.2

1 year ago

0.0.1

1 year ago