1@# Spinner
2
3Spinners indicate progress in a circular fashion. They're great for ongoing
4operations and can also represent known progress.
5
6@reactExample SpinnerExample
7
8@## Props
9
10`Spinner` is a simple stateless component that renders SVG markup. It can be
11used safely in DOM and SVG containers as it only renders SVG elements.
12
13The `value` prop determines how much of the track is filled by the head. When
14this prop is defined, the spinner head will smoothly animate as `value`
15changes. Omitting `value` will result in an "indeterminate" spinner where the
16head spins indefinitely (this is the default appearance).
17
18The `size` prop determines the pixel width/height of the spinner. Size constants
19are provided as an enum: `SpinnerSize.SMALL`,
20`SpinnerSize.STANDARD`, `SpinnerSize.LARGE`. Small and large sizes can be set
21by including `Classes.SMALL` or `Classes.LARGE` in `className` instead of the
22`size` prop (this prevents an API break when upgrading to 3.x).
23
24<div class="@ns-callout @ns-intent-warning @ns-icon-warning-sign">
25    <h4 class="@ns-heading">IE11 compatibility note</h4>
26
27IE11 [does not support CSS transitions on SVG elements][msdn-css-svg] so spinners with known
28`value` will not smoothly transition as `value` changes. Indeterminate spinners still animate
29correctly because they rely on CSS animations.
30
31</div>
32
33[msdn-css-svg]: https://developer.microsoft.com/en-us/microsoft-edge/platform/status/csstransitionsforsvgelements/?q=svg
34
35@interface ISpinnerProps
36