Spinners
WireBootstrap contains a function for displaying spinner icons of different sizes. The spinners can work over an entire page or just one element.
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" } }
);
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();
Last updated
Was this helpful?