Spinner

The TkSpinner component description.

React

import { TkSpinner } from @takeoff-ui/react

Vue

import { TkSpinner } from @takeoff-ui/vue

Angular

import { TkSpinner } from @takeoff-ui/angular

Default

The default usage of spinner.

View Code

React

<TkSpinner />

Vue

<TkSpinner />

Angular

<tk-spinner />

Label

Label of the spinner is defined with the label property.

View Code

React

<TkSpinner type="three-dots" label="Loading..." />

Vue

<TkSpinner type="three-dots" label="Loading..." />

Angular

<tk-spinner type="three-dots" label="Loading..." />

Sizes

Demonstrates various spinner sizes available via the size property.

View Code

React

<TkSpinner size="xlarge" type="rounded" label="XL" />
<TkSpinner size="large" type="rounded" label="L" />
<TkSpinner size="base" type="rounded" label="M" />
<TkSpinner size="small" type="rounded" label="S" />

Vue

<TkSpinner size="xlarge" type="rounded" label="XL" />
<TkSpinner size="large" type="rounded" label="L" />
<TkSpinner size="base" type="rounded" label="M" />
<TkSpinner size="small" type="rounded" label="S" />

Angular

<tk-spinner size="xlarge" type="rounded" label="XL" />
<tk-spinner size="large" type="rounded" label="L" />
<tk-spinner size="base" type="rounded" label="M" />
<tk-spinner size="small" type="rounded" label="S" />

Variants

Demonstrates various spinner types rounded, dots, lines, pulse, three-dots and loader available via the type property.

View Code

React

Vue

Angular

Orientation

Provides both horizontal and vertical orientations via orientation property.

View Code

React

<TkSpinner orientation="horizontal" label="Horizontal" />
<TkSpinner orientation="vertical" label="Vertical" />

Vue

<TkSpinner orientation="horizontal" label="Horizontal" />
<TkSpinner orientation="vertical" label="Vertical" />

Angular

<tk-spinner orientation="horizontal" label="Horizontal" />
<tk-spinner orientation="vertical" label="Vertical" />

API

Props

Name	Type	Default	Description
	string	null	Sets the label of the spinner component.
	"horizontal", "vertical"	'vertical'	Controls the orientation of the spinner component.
	"base", "large", "small", "xlarge", "xsmall", "xxsmall"	'base'	Controls the size of the spinner component.
	"dots", "lines", "loader", "pulse", "rounded", "three-dots"	'rounded'	Sets the style of spinner component.