let { Spinner, SpinnerSize, Label, Fabric } = window.Fabric;

class SpinnerBasicExample extends React.Component<any, any> {
  public render(): JSX.Element {
    return (
      <div className="ms-BasicSpinnersExample">
        <Label>Extra Small Spinner</Label>
        <Spinner size={SpinnerSize.xSmall} />

        <Label>Small Spinner</Label>
        <Spinner size={SpinnerSize.small} />

        <Label>Medium Spinner</Label>
        <Spinner size={SpinnerSize.medium} />

        <Label>Large Spinner</Label>
        <Spinner size={SpinnerSize.large} />

        <Label>Spinner With Label</Label>
        <Spinner label="I am definitely loading..." />

        <Label>Large Spinner With Label</Label>
        <Spinner size={SpinnerSize.large} label="Seriously, still loading..." ariaLive="assertive" />
      </div>
    );
  }
}

ReactDOM.render(<SpinnerBasicExample />, document.getElementById('content'));