Preloader (Spinner) Svelte Component

Preloader Components
Preloader Props
Examples

Preloader Components

There are following components included:

Preloader

Preloader Props

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

Examples

Preloader.svelte

<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>