Skip to main content

Spinner

Spinner displays an animated loading indicator. Use it to communicate that a process is underway and the user should wait.

Import​

import { Spinner } from '@ui-kitten/components';

Basic Usage​

import React from 'react';
import { Layout, Spinner } from '@ui-kitten/components';

const SpinnerExample = () => (
  <Layout style={{ flex: 1, justifyContent: 'center', alignItems: 'center', gap: 16 }}>
    <Spinner size="small" />
    <Spinner size="medium" status="primary" />
    <Spinner size="large" status="danger" />
  </Layout>
);

Props​

PropertyTypeDefaultDescription
status'basic' | 'primary' | 'success' | 'info' | 'warning' | 'danger' | 'control''primary'Semantic color of the spinner.
size'tiny' | 'small' | 'medium' | 'large' | 'giant''medium'Size of the spinner.
animatingbooleantrueWhether the spinner animation is active.

Storybook​

Live examples coming soon via Storybook.