Preloader (Spinner) React 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.jsx

import React from 'react';
import {
  Page,
  Navbar,
  NavbarBackLink,
  Block,
  BlockTitle,
  Preloader,
} from 'konsta/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>
  );
}