Progressbar Svelte Component

In addition to Preloader there is also determinate progressbar to indicate activity.

Progressbar Components

There are following components included:

  • Progressbar

Progressbar Props

NameTypeDefaultDescription
colorsobject

Object with Tailwind CSS colors classes

colors.bgstring'bg-primary'

Progressbar bg color

progressnumber0

Determinate progress (from 0 to 1)

Examples

Progressbar.svelte
<script>
import {
Page,
Navbar,
NavbarBackLink,
Block,
BlockTitle,
Progressbar,
Segmented,
SegmentedButton,
} from 'konsta/svelte';
let progress = 0.1;
</script>
<Page>
<Navbar title="Progressbar" />
<BlockTitle>Determinate Progress Bar</BlockTitle>
<Block strong>
<div class="my-4">
<Progressbar {progress} />
</div>
<Segmented raised>
<SegmentedButton
active={progress === 0.1}
onClick={() => (progress = 0.1)}
>
10%
</SegmentedButton>
<SegmentedButton
active={progress === 0.3}
onClick={() => (progress = 0.3)}
>
30%
</SegmentedButton>
<SegmentedButton
active={progress === 0.5}
onClick={() => (progress = 0.5)}
>
50%
</SegmentedButton>
<SegmentedButton
active={progress === 1.0}
onClick={() => (progress = 1.0)}
>
100%
</SegmentedButton>
</Segmented>
</Block>
<BlockTitle>Colors</BlockTitle>
<Block strong class="space-y-4">
<Progressbar colors={{ bg: 'bg-red-500' }} progress={0.25} />
<Progressbar colors={{ bg: 'bg-green-500' }} progress={0.5} />
<Progressbar colors={{ bg: 'bg-blue-500' }} progress={0.75} />
<Progressbar colors={{ bg: 'bg-yellow-500' }} progress={1} />
</Block>
</Page>
Code licensed under MIT.
2021 © Konsta UI by nolimits4web.