In addition to Preloader there is also determinate progressbar to indicate activity.
There are following components included:
Progressbar
Name | Type | Default | Description |
---|---|---|---|
colors | object | Object with Tailwind CSS colors classes | |
colors.bg | string | 'bg-primary' | Progressbar bg color |
progress | number | 0 | Determinate progress (from 0 to 1) |
<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><SegmentedButtonactive={progress === 0.1}onClick={() => (progress = 0.1)}>10%</SegmentedButton><SegmentedButtonactive={progress === 0.3}onClick={() => (progress = 0.3)}>30%</SegmentedButton><SegmentedButtonactive={progress === 0.5}onClick={() => (progress = 0.5)}>50%</SegmentedButton><SegmentedButtonactive={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>