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

Vue

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

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

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

    <i-block-title>Sizes</i-block-title>
    <i-block
      strong
      inset-material
      outline-ios
      class="grid grid-cols-4 items-center"
    >
      <div class="text-center">
        <i-preloader size="w-4 h-4" />
      </div>
      <div class="text-center">
        <i-preloader size="w-8 h-8" />
      </div>
      <div class="text-center">
        <i-preloader size="w-12 h-12" />
      </div>
      <div class="text-center">
        <i-preloader size="w-16 h-16" />
      </div>
    </i-block>
  </i-page>
</template>
<script>
  import {
    iPage,
    iNavbar,
    iNavbarBackLink,
    iBlock,
    iBlockTitle,
    iPreloader,
  } from 'ina-ui/vue';

  export default {
    components: {
      iPage,
      iNavbar,
      iNavbarBackLink,
      iBlock,
      iBlockTitle,
      iPreloader,
    },

  };
</script>

React