Expand all

jquery.spinner

Provides a jQuery plugins that manage spinners.

To use these jQuery plugins, load the jquery.spinner module with mw.loader.

Example

mw.loader.using( 'jquery.spinner' ).then( () => {
      $( '#bodyContent' ).injectSpinner();
} );
Source:

Methods

$.fn.injectSpinner([opts]) → {jQuery}static #

Inject a spinner after each element in the collection.

Inserts spinner as siblings (not children) of the target elements. Collection contents remain unchanged.

Parameters:

Name Type Attributes Description
opts module:jquery.spinner~SpinnerOpts | string optional

Options. If a string is given, it will be treated as the value of the SpinnerOpts id option.
Source:

Returns:

Type
jQuery
Inject a spinner after each element in the collection.

createSpinner([opts]) → {jQuery}static #

Create a spinner element

The argument is an object with options used to construct the spinner (see below).

It is a good practice to keep a reference to the created spinner to be able to remove it later. Alternatively, one can use the 'id' option and removeSpinner (but make sure to choose an id that's unlikely to cause conflicts, e.g. with extensions, gadgets or user scripts).

CSS classes used:

  • .mw-spinner for every spinner
  • .mw-spinner-small / .mw-spinner-large for size
  • .mw-spinner-block / .mw-spinner-inline for display types

Example

// Create a large spinner reserving all available horizontal space.
var $spinner = $.createSpinner( { size: 'large', type: 'block' } );
// Insert above page content.
$( '#mw-content-text' ).prepend( $spinner );

// Place a small inline spinner next to the "Save" button
var $spinner = $.createSpinner( { size: 'small', type: 'inline' } );
// Alternatively, just `$.createSpinner();` as these are the default options.
$( '#wpSave' ).after( $spinner );

// The following two are equivalent:
$.createSpinner( 'magic' );
$.createSpinner( { id: 'magic' } );

Parameters:

Name Type Attributes Description
opts module:jquery.spinner~SpinnerOpts | string optional

Options. If a string is given, it will be treated as the value of the module:mediawiki.jqueryMsg~SpinnerOpts#id option.
Source:

Returns:

Type
jQuery

Create a spinner element

The argument is an object with options used to construct the spinner (see below).

removeSpinner(id) → {jQuery}static #

Remove a spinner element

Parameters:

Name Type Description
id string

Id of the spinner, as passed to createSpinner
Source:

Returns:

The (now detached) spinner element

Type
jQuery
Remove a spinner element

Type Definitions

SpinnerOpts #

Options for injectSpinner.

Type:

Properties:

Name Type Attributes Default Description
id string optional

If given, spinner will be given an id of "mw-spinner-{id}".
size 'small' | 'large' optional
 'small'

'small' or 'large' for a 20-pixel or 32-pixel spinner.
type 'inline' | 'block' optional
 'inline'

'inline' or 'block'. Inline creates an inline-block with width and height equal to spinner size. Block is a block-level element with width 100%, height equal to spinner size.
Source:
Options for injectSpinner.