# Spinners

WireBootstrap contains a function for displaying spinner icons of different sizes.  The spinners can work over an entire page or just one element. 

{% hint style="info" %}
The `wire.css` file is required to use this function.  Be sure this is included in your page reference.  Visit your theme's documentation for details however this file is usually in the `lib\wire` folder in most themes installations.
{% endhint %}

To use a spinner, create a new instance of the `wire.ui.spinner` class.

```javascript
const spinner = new wire.ui.spinner();
```

## On

Use the `on` method to turn on a spinner.  The following example will turn the entire page opaque and load a medium sized spinner.  

```javascript
spinner.on();
```

### Element

To specify the spinner be over only a specific element, use the first constructor parameter to pass in the `id` selector of the element.  Optionally, you can turn the spinner as part of the constructor.

```javascript
const spinner = new wire.ui.spinner("#button").on();
```

### Size

There are five spinner size icons.  The default is to use a spinner size `3` which is the medium size.  Use the second constructor parameter for configuration.

The following example sets the configuration parameter `size` to `1`.  This would be a more appropriate size to put over a button. 

```javascript
const spinner = new wire.ui.spinner("#button", { size: 1 } );
```

Size also has a helper method that can be used.

```javascript
const spinner = new wire.ui.spinner("#button").size(1);
```

### Style

To change the CSS style for any size , set the `size[N]` property on the confirmation parameter to a CSS icon class(s) as seen below.

```javascript
const spinner = new wire.ui.spinner("#button", 
    { css: { size1: "fa fa-spinner fa-spin fa-1x" } }
);
```

{% hint style="info" %}
By default, the CSS that generates the icon is the `fa-circle-o-notch` icon from Font Awesome 4.  If the spinner icon is not being changed as part of the configuration, be sure this file is included in your page reference.  The file can be hosted or download from [https://www.bootstrapcdn.com/fontawesome](https://www.bootstrapcdn.com/fontawesome/).
{% endhint %}

To add extra classes to a spinner, use the `extra` property on the `css` configuration object.  

The example below changes a spinner color to white.

```javascript
const spinner = new wire.ui.spinner("#button", 
    { css: { extra: "text-white" } }
);
```

## Off

Use the `off` method to turn off an existing spinner.

```javascript
const spinner = new wire.ui.spinner();

...

spinner.off();
```