There are following components included:
Preloader
Name | Type | Default | Description |
---|---|---|---|
colors | object | Object with Tailwind CSS colors classes | |
colors.icon | string | 'text-primary' | Preloader icon color |
size | string | 'w-8 h-8' | Tailwind CSS size classes |
<script>import {Page,Navbar,NavbarBackLink,Block,BlockTitle,Preloader,} from 'konsta/svelte';</script><Page><Navbar title="Preloader" /><BlockTitle>Default</BlockTitle><Block strong class="text-center"><Preloader /></Block><BlockTitle>Colors</BlockTitle><Block strong class="grid grid-cols-4"><div class="text-center"><Preloader colors={{ icon: 'text-red-500' }} /></div><div class="text-center"><Preloader colors={{ icon: 'text-green-500' }} /></div><div class="text-center"><Preloader colors={{ icon: 'text-pink-500' }} /></div><div class="text-center"><Preloader colors={{ icon: 'text-yellow-500' }} /></div></Block><BlockTitle>Sizes</BlockTitle><Block strong class="grid grid-cols-4 items-center"><div class="text-center"><Preloader size="w-4 h-4" /></div><div class="text-center"><Preloader size="w-8 h-8" /></div><div class="text-center"><Preloader size="w-12 h-12" /></div><div class="text-center"><Preloader size="w-16 h-16" /></div></Block></Page>