spinner.md

Spinner

Circular progress indicator.

Available themed spinners:

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

• Main features
• Usage
• Options
  • Spinner options
  • Indeterminate options
  • Determinate options
  • Transition options
  • Common component 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

• Usage with Mithril
• Usage with React

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

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