🔥 Meet Our New Project: t0ggles - Your Ultimate Project Management Tool! 🔥

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.bgIosstring'bg-primary'
colors.bgMaterialstring'bg-md-light-primary dark:bg-md-dark-primary'
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 insetMaterial outlineIos>
<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 insetMaterial outlineIos class="space-y-4">
<Progressbar class="k-color-brand-red" progress={0.25} />
<Progressbar class="k-color-brand-green" progress={0.5} />
<Progressbar class="k-color-brand-yellow" progress={0.75} />
<Progressbar class="k-color-brand-purple" progress={1} />
</Block>
</Page>
Code licensed under MIT.
2022 © Konsta UI by nolimits4web.