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.
1
const spinner = wire.ui.spinner();
Copied!
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.  
1
const spinner = wire.ui.spinner().on();
Copied!
Element
To specify the spinner be over only a specific element, use the first constructor parameter to pass in the id of the element.
1
const spinner = wire.ui.spinner("#button").on();
Copied!
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. 
1
const spinner = wire.ui.spinner("#button", { size: 1 } );
Copied!
Size also has a helper method that can be used.
1
const spinner = wire.ui.spinner("#button").size(1);
Copied!
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.
1
const spinner = wire.ui.spinner("#button", 
2
    { css: { size1: "fa fa-spinner fa-spin fa-1x" } }
3
);
Copied!
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.
1
const spinner = wire.ui.spinner("#button", 
2
    { css: { extra: "text-white" } }
3
);
Copied!
Off
Use the off method to turn off an existing spinner.
1
const spinner = wire.ui.spinner();
2
​
3
...
4
​
5
spinner.off();
Copied!

Utilities - Previous

Collections

Next - Utilities

Copy and Merge

Last modified 9mo ago

Copy link

Contents