Spinners

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

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.

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

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.

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.

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.

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

Size also has a helper method that can be used.

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.

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

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.

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.

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

Off

Use the off method to turn off an existing spinner.

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

...

spinner.off();