# Spinner

{% hint style="success" %}
Free Macro
{% endhint %}

## Screenshot

<figure><img src="https://3271911861-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDHpX6TOKpku17lmsHem1%2Fuploads%2FQfyumvvwwGnreNo5DCVA%2Fice_video_20190212-195025-768x238.gif?alt=media&#x26;token=8be6a123-9ae3-46d0-8024-515a45134760" alt=""><figcaption></figcaption></figure>

## Description

The Spinner is an animated “I am busy” indicator. You can use it for other visual purposes as well of course.

## Adding the Macro

Edit your page.

Select “+” => Other macros

Type in “Bootstrap” in the Search box

Select the “Bootstrap Spinner” macro

## Macro Options

<figure><img src="https://3271911861-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDHpX6TOKpku17lmsHem1%2Fuploads%2FZKT6weuFFlSPKUaTzt2D%2Fimage2019-1-27_22-53-56-768x471.png?alt=media&#x26;token=fac88011-22ab-492a-9d94-9115e556cf1b" alt=""><figcaption></figcaption></figure>

### **Shape**

Select the shape of the spinner

| Shape          | Description                                         |
| -------------- | --------------------------------------------------- |
| Border Spinner | A rotating open circle                              |
| Growing Circle | A circle with an animated increase in color opacity |

### **Style**

Select one of the [Bootstrap color styles.](https://lewe.gitbook.io/bootstrap-visuals-for-confluence/user-guide/bootstrap-color-styles)

**Size**

Select between four sizes:

1. Small
2. Normal
3. Medium
4. Large

### **Display as Button**

If you select this option, the spinner will be displayed as a button.

### **Button Text**

If the “Display as Button” option is selected, you can add a button text here that will be displayed next to the spinner.