Office UI Fabric Vue

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.

Variants

I am definitely loading...
Seriously, still loading...
<div style="max-width: 300px;">
    <VLabel>Extra Small Spinner</VLabel>
    <VSpinner :size="0" />

    <VLabel>Small Spinner</VLabel>
    <VSpinner :size="1" />

    <VLabel>Medium Spinner</VLabel>
    <VSpinner />

    <VLabel>Large Spinner</VLabel>
    <VSpinner :size="3"/>

    <VLabel>Spinner with Label</VLabel>
    <VSpinner label="I am definitely loading..." />

    <VLabel>Large Spinner with Label</VLabel>
    <VSpinner :size="3" label="Seriously, still loading..." />
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

API

Properties

Property Type Required Default Description
label String false '' The label to show next to the Spinner.
size Number (SPINNER_SIZE) false 2 The size of Spinner to render. { extraSmall, small, medium, large }.

Spinner Size

const SPINNER_SIZE = {
    0: { size: '12px', name: 'xSmall' },
    1: { size: '16px', name: 'small' },
    2: { size: '20px', name: 'Medium' },
    3: { size: '28px', name: 'Large' },
}
1
2
3
4
5
6

Slots

Slot Description
default Replaces the label property.

Events

This component does not emit any events.

← Layer →