Components

Loader Dots(React)

Loading indicator with three animated dots.

Version:0.7.2 View sourceChangelogReport issue
Install:yarn add @thumbtack/thumbprint-react --exact
Import:import { LoaderDots } from '@thumbtack/thumbprint-react';

Loader Sizes

Default

  • Loading
<LoaderDots size="medium" />

Small

  • Loading
<LoaderDots size="small" />

Loader colors

This loader is available in multiple colors for use on elements with a non-white background.

Brand

  • Loading
<LoaderDots theme="brand" />

Inverse

  • Loading
<LoaderDots theme="inverse" />

Muted

  • Loading
<LoaderDots theme="muted" />

Props

LoaderDots

  • assistiveText

    Text that describes the current status and is only visible to screenreaders.

    Type
    string
    Default
    'Loading'
  • size

    Controls the size of the dots.

    Type
    oneOf([
      'small',
      'medium',
    ]);
    Default
    'medium'
  • theme

    Changes the dot colors.

    Type
    oneOf([
      'brand',
      'inverse',
      'muted',
    ]);
    Default
    'brand'