Pikas UI

@pikas-ui/loader

This package contains a loader components that can be used to show a loading state.

This library is based on React Spinners

Change Log

Requirements

To use this package, you must install the @pikas-ui/styles package.

Installation

You can install this package using npm, yarn, or pnpm.

npm install @pikas-ui/loader

yarn add @pikas-ui/loader

pnpm add @pikas-ui/loader

Usage

BarLoader

import { BarLoader } from '@pikas-ui/loader'

const Example: React.FC = () => <BarLoader />

Props

Prop	Description	Type	Default
`height`	Height of the loader	`number`	`4`
`width`	Width of the loader	`number`	`100`
`colorName`	Color of the loader	`string`	`"primary"`
`colorHex`	Color of the loader	`string`	-
`loading`	Show the loader	`boolean`	`true`
`speedMultiplier`	Speed multiplier of the loader	`number`	`1`

BeatLoader

import { BeatLoader } from '@pikas-ui/loader'

const Example: React.FC = () => <BeatLoader />

Props

Prop	Description	Type	Default
`size`	Size of the loader	`number`	`15`
`margin`	Margin of the loader	`number`	`2`
`colorName`	Color of the loader	`string`	`"primary"`
`colorHex`	Color of the loader	`string`	-
`loading`	Show the loader	`boolean`	`true`
`speedMultiplier`	Speed multiplier of the loader	`number`	`1`

BounceLoader

import { BounceLoader } from '@pikas-ui/loader'

const Example: React.FC = () => <BounceLoader />

Props

Prop	Description	Type	Default
`size`	Size of the loader	`number`	`60`
`colorName`	Color of the loader	`string`	`"primary"`
`colorHex`	Color of the loader	`string`	-
`loading`	Show the loader	`boolean`	`true`
`speedMultiplier`	Speed multiplier of the loader	`number`	`1`

CircleLoader

import { CircleLoader } from '@pikas-ui/loader'

const Example: React.FC = () => <CircleLoader />

Props

Prop	Description	Type	Default
`size`	Size of the loader	`number`	`50`
`colorName`	Color of the loader	`string`	`"primary"`
`colorHex`	Color of the loader	`string`	-
`loading`	Show the loader	`boolean`	`true`
`speedMultiplier`	Speed multiplier of the loader	`number`	`1`

ClimbingBoxLoader

import { ClimbingBoxLoader } from '@pikas-ui/loader'

const Example: React.FC = () => <ClimbingBoxLoader />

Props

Prop	Description	Type	Default
`size`	Size of the loader	`number`	`15`
`colorName`	Color of the loader	`string`	`"primary"`
`colorHex`	Color of the loader	`string`	-
`loading`	Show the loader	`boolean`	`true`
`speedMultiplier`	Speed multiplier of the loader	`number`	`1`

ClipLoader

import { ClipLoader } from '@pikas-ui/loader'

const Example: React.FC = () => <ClipLoader />

Props

Prop	Description	Type	Default
`size`	Size of the loader	`number`	`35`
`colorName`	Color of the loader	`string`	`"primary"`
`colorHex`	Color of the loader	`string`	-
`loading`	Show the loader	`boolean`	`true`
`speedMultiplier`	Speed multiplier of the loader	`number`	`1`

ClockLoader

import { ClockLoader } from '@pikas-ui/loader'

const Example: React.FC = () => <ClockLoader />

Props

Prop	Description	Type	Default
`size`	Size of the loader	`number`	`50`
`colorName`	Color of the loader	`string`	`"primary"`
`colorHex`	Color of the loader	`string`	-
`loading`	Show the loader	`boolean`	`true`
`speedMultiplier`	Speed multiplier of the loader	`number`	`1`

DotLoader

import { DotLoader } from '@pikas-ui/loader'

const Example: React.FC = () => <DotLoader />

Props

Prop	Description	Type	Default
`size`	Size of the loader	`number`	`60`
`colorName`	Color of the loader	`string`	`"primary"`
`colorHex`	Color of the loader	`string`	-
`loading`	Show the loader	`boolean`	`true`
`speedMultiplier`	Speed multiplier of the loader	`number`	`1`

FadeLoader

import { FadeLoader } from '@pikas-ui/loader'

const Example: React.FC = () => <FadeLoader />

Props

Prop	Description	Type	Default
`height`	Height of the loader	`number`	`15`
`width`	Width of the loader	`number`	`5`
`radius`	Radius of the loader	`number`	`2`
`margin`	Margin of the loader	`number`	`2`
`colorName`	Color of the loader	`string`	`"primary"`
`colorHex`	Color of the loader	`string`	-
`loading`	Show the loader	`boolean`	`true`
`speedMultiplier`	Speed multiplier of the loader	`number`	`1`

GridLoader

import { GridLoader } from '@pikas-ui/loader'

const Example: React.FC = () => <GridLoader />

Props

Prop	Description	Type	Default
`size`	Size of the loader	`number`	`15`
`margin`	Margin of the loader	`number`	`2`
`colorName`	Color of the loader	`string`	`"primary"`
`colorHex`	Color of the loader	`string`	-
`loading`	Show the loader	`boolean`	`true`
`speedMultiplier`	Speed multiplier of the loader	`number`	`1`

HashLoader

import { HashLoader } from '@pikas-ui/loader'

const Example: React.FC = () => <HashLoader />

Props

Prop	Description	Type	Default
`size`	Size of the loader	`number`	`50`
`colorName`	Color of the loader	`string`	`"primary"`
`colorHex`	Color of the loader	`string`	-
`loading`	Show the loader	`boolean`	`true`
`speedMultiplier`	Speed multiplier of the loader	`number`	`1`

MoonLoader

import { MoonLoader } from '@pikas-ui/loader'

const Example: React.FC = () => <MoonLoader />

Props

Prop	Description	Type	Default
`size`	Size of the loader	`number`	`60`
`colorName`	Color of the loader	`string`	`"primary"`
`colorHex`	Color of the loader	`string`	-
`loading`	Show the loader	`boolean`	`true`
`speedMultiplier`	Speed multiplier of the loader	`number`	`1`

PacmanLoader

import { PacmanLoader } from '@pikas-ui/loader'

const Example: React.FC = () => <PacmanLoader />

Props

Prop	Description	Type	Default
`size`	Size of the loader	`number`	`60`
`margin`	Margin of the loader	`number`	`2`
`colorName`	Color of the loader	`string`	`"primary"`
`colorHex`	Color of the loader	`string`	-
`colorBubble`	Color of the bubble	`string`	-
`colorBubbleHex`	Color of the bubble	`string`	-
`loading`	Show the loader	`boolean`	`true`
`speedMultiplier`	Speed multiplier of the loader	`number`	`1`

PropagateLoader

import { PropagateLoader } from '@pikas-ui/loader'

const Example: React.FC = () => <PropagateLoader />

Props

Prop	Description	Type	Default
`size`	Size of the loader	`number`	`15`
`colorName`	Color of the loader	`string`	`"primary"`
`colorHex`	Color of the loader	`string`	-
`loading`	Show the loader	`boolean`	`true`
`speedMultiplier`	Speed multiplier of the loader	`number`	`1`

PuffLoader

import { PuffLoader } from '@pikas-ui/loader'

const Example: React.FC = () => <PuffLoader />

Props

Prop	Description	Type	Default
`size`	Size of the loader	`number`	`60`
`colorName`	Color of the loader	`string`	`"primary"`
`colorHex`	Color of the loader	`string`	-
`loading`	Show the loader	`boolean`	`true`
`speedMultiplier`	Speed multiplier of the loader	`number`	`1`

PulseLoader

import { PulseLoader } from '@pikas-ui/loader'

const Example: React.FC = () => <PulseLoader />

Props

Prop	Description	Type	Default
`size`	Size of the loader	`number`	`15`
`margin`	Margin of the loader	`number`	`2`
`colorName`	Color of the loader	`string`	`"primary"`
`colorHex`	Color of the loader	`string`	-
`loading`	Show the loader	`boolean`	`true`
`speedMultiplier`	Speed multiplier of the loader	`number`	`1`

RingLoader

import { RingLoader } from '@pikas-ui/loader'

const Example: React.FC = () => <RingLoader />

Props

Prop	Description	Type	Default
`size`	Size of the loader	`number`	`60`
`colorName`	Color of the loader	`string`	`"primary"`
`colorHex`	Color of the loader	`string`	-
`loading`	Show the loader	`boolean`	`true`
`speedMultiplier`	Speed multiplier of the loader	`number`	`1`

RiseLoader

import { RiseLoader } from '@pikas-ui/loader'

const Example: React.FC = () => <RiseLoader />

Props

Prop	Description	Type	Default
`size`	Size of the loader	`number`	`15`
`margin`	Margin of the loader	`number`	`2`
`colorName`	Color of the loader	`string`	`"primary"`
`colorHex`	Color of the loader	`string`	-
`loading`	Show the loader	`boolean`	`true`
`speedMultiplier`	Speed multiplier of the loader	`number`	`1`

RotateLoader

import { RotateLoader } from '@pikas-ui/loader'

const Example: React.FC = () => <RotateLoader />

Props

Prop	Description	Type	Default
`size`	Size of the loader	`number`	`15`
`margin`	Margin of the loader	`number`	`2`
`colorName`	Color of the loader	`string`	`"primary"`
`colorHex`	Color of the loader	`string`	-
`loading`	Show the loader	`boolean`	`true`
`speedMultiplier`	Speed multiplier of the loader	`number`	`1`

ScaleLoader

import { ScaleLoader } from '@pikas-ui/loader'

const Example: React.FC = () => <ScaleLoader />

Props

Prop	Description	Type	Default
`height`	Height of the loader	`number`	`35`
`width`	Width of the loader	`number`	`4`
`radius`	Radius of the loader	`number`	`2`
`margin`	Margin of the loader	`number`	`2`
`colorName`	Color of the loader	`string`	`"primary"`
`colorHex`	Color of the loader	`string`	-
`loading`	Show the loader	`boolean`	`true`
`speedMultiplier`	Speed multiplier of the loader	`number`	`1`

SkewLoader

import { SkewLoader } from '@pikas-ui/loader'

const Example: React.FC = () => <SkewLoader />

Props

Prop	Description	Type	Default
`size`	Size of the loader	`number`	`20`
`colorName`	Color of the loader	`string`	`"primary"`
`colorHex`	Color of the loader	`string`	-
`loading`	Show the loader	`boolean`	`true`
`speedMultiplier`	Speed multiplier of the loader	`number`	`1`

SquareLoader

import { SquareLoader } from '@pikas-ui/loader'

const Example: React.FC = () => <SquareLoader />

Props

Prop	Description	Type	Default
`size`	Size of the loader	`number`	`50`
`colorName`	Color of the loader	`string`	`"primary"`
`colorHex`	Color of the loader	`string`	-
`loading`	Show the loader	`boolean`	`true`
`speedMultiplier`	Speed multiplier of the loader	`number`	`1`

SyncLoader

import { SyncLoader } from '@pikas-ui/loader'

const Example: React.FC = () => <SyncLoader />

Props

Prop	Description	Type	Default
`size`	Size of the loader	`number`	`15`
`margin`	Margin of the loader	`number`	`2`
`colorName`	Color of the loader	`string`	`"primary"`
`colorHex`	Color of the loader	`string`	-
`loading`	Show the loader	`boolean`	`true`
`speedMultiplier`	Speed multiplier of the loader	`number`	`1`

Contributing

This documentation can be edited on GitHub here