Back to Polythene Spinner main page

Spinner component for React

• Options
• Usage
  • Displaying the Spinner
  • Show
  • Progress spinner
• Appearance
  • Single color
  • Styling
    • Themed component
    • CSS
    • Style
  • Dark or light tone
  • Transitions

Options

Spinner options

Usage

A typical Material Design (indeterminate) spinner:

import { MaterialDesignSpinner as Spinner } from "polythene-react"

A typical iOS (indeterminate) spinner:

import { IOSSpinner as Spinner } from "polythene-react"

A Material Design determinate spinner:

import { MaterialDesignProgressSpinner as Spinner } from "polythene-react"

Displaying the Spinner

import React from "react"
import { MaterialDesignSpinner as Spinner } from "polythene-react"

<Spinner show />

Show

By default the Spinner is hidden. To show the spinner, either:

• Set option show to true
• Set option permanent to true (for testing and demos)

Progress spinner

To show a spinner "filling" a progress circle:

import React from "react"
import { MaterialDesignSpinner as Spinner } from "polythene-react"

<Spinner show percentage={this.state.percentage} />

The progress spinner draws a circle between 0 and 360 degrees. The completeness is set with percentage, with a range between 0.0 and 1.0. This value would normally be set by a progress function, for instance a loader.

For demonstration purposes, this can be emulated with a "step" function that updates the percentage until 1.0 is reached:

Appearance

Single color

For MaterialDesignSpinner and MaterialDesignProgressSpinner.

Use option singleColor to use only one color (by default the primary color).

Styling

Below are examples how to change the Spinner appearance, either with a theme or with CSS.

You can find more information about theming in Theming.

Themed component

import { SpinnerCSS } from "polythene-css"

SpinnerCSS.addStyle(".themed-spinner", {
  color_light_background: "#2196F3",
  border_radius:          0
})

<Spinner className="themed-spinner" />

CSS

Change CSS using the CSS classes:

• Base Spinner CSS classes
• iOS Spinner CSS classes
• Material Design Spinner CSS classes
• Material Design Progress Spinner CSS classes

Class names can be imported with:

import classes from "polythene-css-classes/ios-spinner"

// etcetera

Style

Some style attributes can be set using option style. For example:

<Spinner
  style={{
    color: "red"
  }}
/>

Dark or light tone

If the component - or a component's parent - has option tone set to "dark", the component will be rendered with light colors on dark.

• Use tone: "dark" to render light on dark
• Use tone: "light" to locally render normally when dark tone is set

Transitions

See Transitions