Comment on page
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();
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();
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();
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);
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" } }
);
Use the
off method to turn off an existing spinner.const spinner = new wire.ui.spinner();
...
spinner.off();
Last modified 8mo ago