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

Playground

Preview

Generated Code

<TkSpinner
  type="rounded"
  variant="neutral"
  size="base"
  orientation="vertical"
  label="Loading..."
/>

<TkSpinner
  type="rounded"
  variant="neutral"
  size="base"
  orientation="vertical"
  label="Loading..."
/>

<tk-spinner
  type="rounded"
  variant="neutral"
  size="base"
  orientation="vertical"
  label="Loading..."
/>

Controls

Type:

Variant:

Size:

Orientation:

Label:

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..." />

Variants

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

View Code

React

Vue

Angular

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" />

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 data-testid attribute on the root container element.
	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", "logo", "pulse", "rounded", "three-dots"	'rounded'	Sets the style of spinner component.
	"danger", "info", "neutral", "primary", "success", "warning"	'neutral'	Sets the color variant of spinner component.