Spinner

A spinner informs users about the loading of content.

AndroidreleasediOSreleased

Native only

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

Example

Example theme:

DBA lightFinn lightTori lightBlocket lightNeutral lightVend lightDBA darkFinn darkTori darkBlocket darkNeutral darkVend dark

Usage

Design Guidelines

See Figma: Warp - Components / Spinner

Framework(s)

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

Questions?

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