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

import React from 'react';
import {
  Page,
  Navbar,
  NavbarBackLink,
  Block,
  BlockTitle,
  Preloader,
} from 'ina-ui/react';

export default function PreloaderPage() {
  return (
    <Page>
      <Navbar
        title="Preloader"
        />

      <BlockTitle>Default</BlockTitle>
      <Block strong insetMaterial outlineIos className="text-center">
        <Preloader />
      </Block>

      <BlockTitle>Colors</BlockTitle>
      <Block strong insetMaterial outlineIos className="grid grid-cols-4">
        <div className="text-center">
          <Preloader className="k-color-brand-red" />
        </div>
        <div className="text-center">
          <Preloader className="k-color-brand-green" />
        </div>
        <div className="text-center">
          <Preloader className="k-color-brand-purple" />
        </div>
        <div className="text-center">
          <Preloader className="k-color-brand-yellow" />
        </div>
      </Block>

      <BlockTitle>Sizes</BlockTitle>
      <Block
        strong
        insetMaterial
        outlineIos
        className="grid grid-cols-4 items-center"
      >
        <div className="text-center">
          <Preloader size="w-4 h-4" />
        </div>
        <div className="text-center">
          <Preloader size="w-8 h-8" />
        </div>
        <div className="text-center">
          <Preloader size="w-12 h-12" />
        </div>
        <div className="text-center">
          <Preloader size="w-16 h-16" />
        </div>
      </Block>
    </Page>
  );
}