The responsive layout is in early preview. Please report any bugs.

Spinner

Twilio's Spinner component

Status: production
Version: 7.0.2
Sources: Github
Storybook
Import from: @twilio-paste/core/spinner — or — @twilio-paste/spinner

Guidelines#

About Spinner#

The spinner is an icon component that can be used in situations where you would like to communicate a loading state to the user. It inherits a lot of properties from the Icon component.

Accessible animation

The spinner animation will automatically respect user preferences set at the operating system level via the prefers reduced motion API.

Examples#

Default#

The default Spinner settings are using the default icon size and color, which is designed to match our default text size and color.

Accessibility

You are required to set whether the Spinner is decorative or not, please follow the icon accessibility guidelines.

<Spinner decorative={false} title="Loading" />

<Spinner decorative={false} title="Loading" />

Sizing#

To resize the Spinner set a size prop. It will accept any valid icon size token as it's value. These are conveniently designed to be 1:1 to font sizing, e.g. font-size-40 can be paired with icon-size-40.

<Stack orientation="horizontal" spacing="space30">
  <Spinner size="sizeIcon10" decorative={false} title="Loading" />
  <Spinner size="sizeIcon20" decorative={false} title="Loading" />
  <Spinner size="sizeIcon30" decorative={false} title="Loading" />
  <Spinner size="sizeIcon40" decorative={false} title="Loading" />
  <Spinner size="sizeIcon50" decorative={false} title="Loading" />
  <Spinner size="sizeIcon60" decorative={false} title="Loading" />
  <Spinner size="sizeIcon70" decorative={false} title="Loading" />
  <Spinner size="sizeIcon80" decorative={false} title="Loading" />
  <Spinner size="sizeIcon90" decorative={false} title="Loading" />
  <Spinner size="sizeIcon100" decorative={false} title="Loading" />
  <Spinner size="sizeIcon110" decorative={false} title="Loading" />
</Stack>

<Stack orientation="horizontal" spacing="space30">
  <Spinner size="sizeIcon10" decorative={false} title="Loading" />
  <Spinner size="sizeIcon20" decorative={false} title="Loading" />
  <Spinner size="sizeIcon30" decorative={false} title="Loading" />
  <Spinner size="sizeIcon40" decorative={false} title="Loading" />
  <Spinner size="sizeIcon50" decorative={false} title="Loading" />
  <Spinner size="sizeIcon60" decorative={false} title="Loading" />
  <Spinner size="sizeIcon70" decorative={false} title="Loading" />
  <Spinner size="sizeIcon80" decorative={false} title="Loading" />
  <Spinner size="sizeIcon90" decorative={false} title="Loading" />
  <Spinner size="sizeIcon100" decorative={false} title="Loading" />
  <Spinner size="sizeIcon110" decorative={false} title="Loading" />
</Stack>

Setting a color#

The Spinner, like any other icon, can be re-colored to meet your needs. Set an color in the same way you would with an icon.

<Spinner color="colorTextSuccess" decorative={false} title="Loading" />

<Spinner color="colorTextSuccess" decorative={false} title="Loading" />

Usage Guide#

API#

Installation#

yarn add @twilio-paste/spinner - or - yarn add @twilio-paste/core

Usage#

import {Spinner} from '@twilio-paste/spinner';
const Component = () => {
  return <Spinner decorative={false} title="Loading" />;
};

Spinner Props#

`as?: keyof JSX.IntrinsicElements`

Changes the sematic element of the spinner wrapper.

`decorative?: boolean`

Whether or not the SVG is just visual flair or adds meaning to the page. Specifically for screenreaders to know whether to read out the title or not.

`title?: string`

The accessibility text that is read when screenreaders get to this component.

`size?: IconSize`

Used to change the size of the Spinner.

`color?: TextColor`

Sets the icon color to any of our text color tokens or currentColor, which inherits text color from the parent element.

`delay?: number`

Time delay in milliseconds of the animation.

Spinner

Guidelines.css-1p5xx02{-webkit-text-decoration:none;text-decoration:none;margin-left:0.5rem;color:rgb(96,107,133);}.css-1p5xx02:hover{-webkit-text-decoration:underline;text-decoration:underline;}#

About Spinner#

Accessible animation

Examples#

Default#

Accessibility

Sizing#

Setting a color#

Usage Guide#

API#

Installation#

Usage#

Spinner Props#

as?: keyof JSX.IntrinsicElements

decorative?: boolean

title?: string

size?: IconSize

color?: TextColor

delay?: number

7.0.2#

Patch Changes#

7.0.1#

Patch Changes#

7.0.0#

Patch Changes#

6.0.1#

Patch Changes#

6.0.0#

Patch Changes#

5.0.2#

Patch Changes#

5.0.1#

Patch Changes#

5.0.0#

Patch Changes#

4.0.1#

Patch Changes#

4.0.0#

Patch Changes#

3.1.1link takes you to an external page (2021-01-25)

Features#

3.0.5link takes you to an external page (2021-01-15)

3.0.4link takes you to an external page (2021-01-14)

3.0.3link takes you to an external page (2021-01-13)

3.0.2link takes you to an external page (2021-01-07)

3.0.1link takes you to an external page (2020-12-17)

Bug Fixes#

BREAKING CHANGES#

2.0.41link takes you to an external page (2020-12-15)

2.0.40link takes you to an external page (2020-12-11)

2.0.39link takes you to an external page (2020-12-11)

2.0.38link takes you to an external page (2020-12-09)

2.0.37link takes you to an external page (2020-12-03)

2.0.36link takes you to an external page (2020-12-02)

2.0.35link takes you to an external page (2020-11-16)

2.0.34link takes you to an external page (2020-11-11)

2.0.33link takes you to an external page (2020-11-10)

2.0.32link takes you to an external page (2020-11-06)

2.0.31link takes you to an external page (2020-11-05)

2.0.30link takes you to an external page (2020-10-30)

2.0.29link takes you to an external page (2020-10-29)

2.0.28link takes you to an external page (2020-10-23)

2.0.27link takes you to an external page (2020-10-21)

2.0.26link takes you to an external page (2020-10-19)

2.0.25link takes you to an external page (2020-10-15)

2.0.24link takes you to an external page (2020-10-13)

2.0.23link takes you to an external page (2020-10-09)

2.0.22link takes you to an external page (2020-10-07)

2.0.21link takes you to an external page (2020-10-07)

2.0.20link takes you to an external page (2020-10-07)

2.0.19link takes you to an external page (2020-10-07)

2.0.18link takes you to an external page (2020-09-22)

2.0.17link takes you to an external page (2020-09-21)

2.0.16link takes you to an external page (2020-09-15)

2.0.15link takes you to an external page (2020-09-15)

2.0.14link takes you to an external page (2020-09-14)

2.0.13link takes you to an external page (2020-09-10)

2.0.12link takes you to an external page (2020-09-09)

2.0.11link takes you to an external page (2020-09-09)

Guidelines#

`as?: keyof JSX.IntrinsicElements`

`decorative?: boolean`

`title?: string`

`size?: IconSize`

`color?: TextColor`

`delay?: number`

3.1.1 (2021-01-25)

3.0.5 (2021-01-15)

3.0.4 (2021-01-14)

3.0.3 (2021-01-13)

3.0.2 (2021-01-07)

3.0.1 (2020-12-17)

2.0.41 (2020-12-15)

2.0.40 (2020-12-11)

2.0.39 (2020-12-11)

2.0.38 (2020-12-09)

2.0.37 (2020-12-03)

2.0.36 (2020-12-02)

2.0.35 (2020-11-16)

2.0.34 (2020-11-11)

2.0.33 (2020-11-10)

2.0.32 (2020-11-06)

2.0.31 (2020-11-05)

2.0.30 (2020-10-30)

2.0.29 (2020-10-29)

2.0.28 (2020-10-23)

2.0.27 (2020-10-21)

2.0.26 (2020-10-19)

2.0.25 (2020-10-15)

2.0.24 (2020-10-13)

2.0.23 (2020-10-09)

2.0.22 (2020-10-07)

2.0.21 (2020-10-07)

2.0.20 (2020-10-07)

2.0.19 (2020-10-07)

2.0.18 (2020-09-22)

2.0.17 (2020-09-21)

2.0.16 (2020-09-15)

2.0.15 (2020-09-15)

2.0.14 (2020-09-14)

2.0.13 (2020-09-10)

2.0.12 (2020-09-09)

2.0.11 (2020-09-09)

2.0.10 (2020-09-08)

2.0.9 (2020-09-08)

2.0.8 (2020-09-03)

2.0.7 (2020-08-31)

2.0.6 (2020-08-31)

2.0.5 (2020-08-24)

2.0.4 (2020-08-19)

2.0.3 (2020-08-12)

2.0.2 (2020-08-12)

2.0.1 (2020-08-06)

1.2.33 (2020-08-04)

1.2.32 (2020-08-04)

1.2.31 (2020-07-30)

1.2.30 (2020-07-29)

1.2.29 (2020-07-28)

1.2.28 (2020-07-22)

1.2.27 (2020-07-20)

1.2.26 (2020-07-15)

1.2.25 (2020-07-14)

1.2.24 (2020-07-14)

1.2.23 (2020-07-02)

1.2.22 (2020-07-02)

1.2.21 (2020-07-01)

1.2.20 (2020-06-25)

1.2.19 (2020-06-25)

1.2.18 (2020-06-23)

1.2.17 (2020-06-22)

1.2.16 (2020-06-18)

1.2.15 (2020-06-16)

1.2.14 (2020-06-12)

1.2.13 (2020-06-10)

1.2.12 (2020-06-05)

1.2.11 (2020-06-01)

1.2.10 (2020-06-01)

1.2.9 (2020-05-28)

1.2.8 (2020-05-20)