Spinner

July 15, 2018 · View on GitHub

Circular progress indicator.

Available themed spinners:

Indeterminate spinners:
- MaterialDesignSpinner
- IOSSpinner
Determinate spinner:
- MaterialDesignProgressSpinner

Main features
Usage
Options
Composition
CSS classes

Main features

Conditionally show spinner
Set size
Create a FAB-like appearance with shadow and whitespace; set z-depth
Material Design / iOS spinner: set color
Progress spinner: set percentage
Progress spinner: animate between steps; set update duration

Usage

Options

Spinner options

Parameter	Required	Type	Default	Description
permanent	optional	Boolean		Set to `true` to always show the spinner (mostly used for demonstration purposes)
raised	optional	Boolean		Set to `true` to create a FAB-like appearance with shadow and whitespace around the spinner
shadowDepth	optional	Number 0-5	1 (if `raised` is set)	Depth of the shadow
show	optional	Boolean		Set to `true` to show the spinner
size	optional	String	"regular"	Either "small" (24px), "regular" (32px), "medium" (40px), "large" (48px), "fab" (56px). Adds CSS class "small", "regular", "medium", "large", "fab"

Indeterminate options

For MaterialDesignSpinner and IOSSpinner:

Parameter	Required	Type	Default	Description
singleColor	optional	Boolean		Set to `true` to use only one color (by default the primary color)

Determinate options

For MaterialDesignProgressSpinner:

Parameter	Required	Type	Default	Description
animated	optional	Boolean	false	Set to `true` to animate the progress between subsequent steps
percentage	optional	Number (0..1) or Function `() -> Number`		(Determinate spinner) Sets the progress percentage value
updateDuration	optional	Number (seconds)	0.8	The duration of the step progress update

Transition options

See: Transitions

Common component options

Parameter	Required	Type	Default	Description
after	optional	String, hyperscript or component		Extra content after main content; note that this content is placed right of preceding elements with a higher stacking depth
before	optional	String, hyperscript or component		Extra content before main content; note that this content is placed left of subsequent elements with a lower stacking depth
className	optional	String		Extra CSS class appended to `pe-spinner`
element	optional	String	"div"	HTML element tag
events	optional	Object		Options object containing one or more standard events such as `onclick` (React: `onClick`)
id	optional	String		HTML element id
style	optional	Object		For setting simple style attributes
tone	optional	String: "dark" or "light"		Renders the component light on dark (sets class `pe-dark-tone`); use "light" to locally inverse (sets class `pe-light-tone`)

Composition

Spinner sometimes uses:

Shadow (when raised is used)

CSS classes