Spinner

Introduction

Spinners indicate progress in a circular fashion. They're great for ongoing operations and can also represent known progress.

Spinner is a simple stateless component that renders SVG markup. It can be used safely in DOM and SVG containers as it only renders SVG elements.

The value prop determines how much of the track is filled by the head. When this prop is defined, the spinner head will smoothly animate as value changes. Omitting value will result in an "indeterminate" spinner where the head spins indefinitely (this is the default appearance).

The size prop determines the pixel width/height of the spinner. Size constants are provided as static properties: Spinner.SIZE_SMALL, Spinner.SIZE_STANDARD, Spinner.SIZE_LARGE. Small and large sizes can be set by including Classes.SMALL or Classes.LARGE in className instead of the size prop (this prevents an API break when upgrading to 3.x).

Examples

No Props

Size and Value Props Set

Usage

Spinner

import React from "react";
import { Spinner } from "@commure/components-foundation";
function MySpinner() {
return (
<Spinner
intent={intent} size={size} value={hasValue ? value : null}
/>
);
}
export default MySpinner;

API Reference

Spinner

Prop NameRequired?TypeDescription
classNamefalsestringA space-delimited list of class names to pass along to a child element.
intentfalseIntentVisual intent color to apply to element.
sizefalsenumberWidth and height of the spinner in pixels. The size cannot be less than 10px. Constants are available for common sizes: - `Spinner.SIZE_SMALL = 20px` - `Spinner.SIZE_STANDARD = 50px` - `Spinner.SIZE_LARGE = 100px`
tagNamefalsekeyof IntrinsicElementsHTML tag for the two wrapper elements. If rendering a `<Spinner>` inside an `<svg>`, change this to an SVG element like `"g"`.
valuefalsenumberA value between 0 and 1 (inclusive) representing how far along the operation is. Values below 0 or above 1 will be interpreted as 0 or 1 respectively. Omitting this prop will result in an "indeterminate" spinner where the head spins indefinitely.

Related Reading

Blueprint Reference