Office UI Fabric JS

Microsoft no longer supports this content and will not be responding to bugs or issues. We recommend using the newer version Office UI Fabric React as your front-end framework.

Spinner

Overview

A Spinner is an outline of a circle which animates around itself indicating to the user that things are processing. A Spinner is shown when it's unsure how long a task will take making it the indeterminate version of a ProgressIndicator. They can be various sizes, located inline with content or centered. They generally appear after an action is being processed or committed. They are subtle and generally do not take up much space, but are transitions from the completed task.

Using this Component

Confirm that you have references to Fabric's CSS and JavaScript on your page:

					<link rel="stylesheet" href="fabric.min.css" />
<link rel="stylesheet" href="fabric.components.min.css" />
<script src="fabric.min.js"></script>
		
	

Copy the HTML from one of the samples below into your page. For example:
```
<div class="ms-Spinner">
</div>
```

Add the following <script> tag to your page, below the references to Fabric's JS, to instantiate all Spinner components on the page:

<script>
  var SpinnerElements = document.querySelectorAll(".ms-Spinner");
  for (var i = 0; i < SpinnerElements.length; i++) {
    new fabric['Spinner'](SpinnerElements[i]);
  }
</script>

Replace the sample HTML content with your content.

Variants

Default Spinner

<div class="ms-Spinner">
</div>

<script>
  var SpinnerElements = document.querySelectorAll(".ms-Spinner");
  for (var i = 0; i < SpinnerElements.length; i++) {
    new fabric['Spinner'](SpinnerElements[i]);
  }
</script>

Large Spinner

<div class="ms-Spinner ms-Spinner--large">
</div>

<script>
  var SpinnerElements = document.querySelectorAll(".ms-Spinner");
  for (var i = 0; i < SpinnerElements.length; i++) {
    new fabric['Spinner'](SpinnerElements[i]);
  }
</script>

Spinner with Label

<div class="ms-Spinner">
  <div class="ms-Spinner-label">
    Loading...
  </div>
</div>

<script>
  var SpinnerElements = document.querySelectorAll(".ms-Spinner");
  for (var i = 0; i < SpinnerElements.length; i++) {
    new fabric['Spinner'](SpinnerElements[i]);
  }
</script>

Large Spinner with Label

<div class="ms-Spinner ms-Spinner--large">
  <div class="ms-Spinner-label">
    Loading...
  </div>
</div>

<script>
  var SpinnerElements = document.querySelectorAll(".ms-Spinner");
  for (var i = 0; i < SpinnerElements.length; i++) {
    new fabric['Spinner'](SpinnerElements[i]);
  }
</script>

Methods

Name	Parameters	Description
`start()`	None	Starts or restarts the animation sequence
`stop()`	None	Stops the animation sequence