Spinner

A spinner is an animated spinning icon that informs users about the loading of content. Use a Spinner when confirming a change has been made or a task is being processed.

For the web implementation of a "spinner", see CSS - Animation - Spinner.

React

unsupported

Vue

unsupported

Elements

unsupported

Android

released

iOS

released

Example

Usage

Design Guidelines

See Figma: Warp - Components / Spinner

Questions?

Feel free to ask any questions on usage in the Warp DS Slack channel: #nmp-warp-design-system

Frameworks

Syntax

@Composable
fun WarpSpinner(
    modifier: Modifier = Modifier,
    size: WarpSpinnerSize = WarpSpinnerSize.Default,
)

Visual options

There are three supported sizes for the Spinner.

WarpSpinnerSize.Small
WarpSpinnerSize.Default
WarpSpinnerSize.Large

The default size is WarpSpinnerSize.Default

WarpSpinner(size = WarpSpinnerSize.Small)
WarpSpinner()
WarpSpinner(size = WarpSpinnerSize.Large)

Legacy support

Supported in xml layouts

<com.schibsted.nmp.warp.components.legacy.WarpSpinnerView
    android:id="@+id/spinner_large"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:padding="@dimen/space2"
    app:spinnerSize="large"/>

Parameters

Optional Props

name	type	default	notes
modifier	Modifier	Modifier	Sets the modifier for the spinner
size	WarpSpinnerSize.Small WarpSpinnerSize.Default WarpSpinnerSize.Large	WarpSpinnerSize.Default	Size of the spinner