Preloader (Spinner) Vue 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.iconIos	string	'text-primary'
colors.iconMaterial	string	'text-md-light-primary dark:text-md-dark-primary'
component	string	'span'	Component's HTML Element
size	string	'w-8 h-8'	Tailwind CSS size classes

Examples

Preloader.vue

<template>
  <k-page>
    <k-navbar title="Preloader" />

    <k-block-title>Default</k-block-title>
    <k-block strong inset-material outline-ios class="text-center">
      <k-preloader />
    </k-block>

    <k-block-title>Colors</k-block-title>
    <k-block strong inset-material outline-ios class="grid grid-cols-4">
      <div class="text-center">
        <k-preloader class="k-color-brand-red" />
      </div>
      <div class="text-center">
        <k-preloader class="k-color-brand-green" />
      </div>
      <div class="text-center">
        <k-preloader class="k-color-brand-purple" />
      </div>
      <div class="text-center">
        <k-preloader class="k-color-brand-yellow" />
      </div>
    </k-block>

    <k-block-title>Sizes</k-block-title>
    <k-block
      strong
      inset-material
      outline-ios
      class="grid grid-cols-4 items-center"
    >
      <div class="text-center">
        <k-preloader size="w-4 h-4" />
      </div>
      <div class="text-center">
        <k-preloader size="w-8 h-8" />
      </div>
      <div class="text-center">
        <k-preloader size="w-12 h-12" />
      </div>
      <div class="text-center">
        <k-preloader size="w-16 h-16" />
      </div>
    </k-block>
  </k-page>
</template>
<script>
  import {
    kPage,
    kNavbar,
    kNavbarBackLink,
    kBlock,
    kBlockTitle,
    kPreloader,
  } from 'konsta/vue';

  export default {
    components: {
      kPage,
      kNavbar,
      kNavbarBackLink,
      kBlock,
      kBlockTitle,
      kPreloader,
    },

  };
</script>