Penguin

Spinner

Loading spinner.

##target spinner

##fullscreen spinner

$(‘target’).spinner(options);

##how to use

Argument Type Description Default value
transitionDuration number Css transition duration. If transition is removed set to 0 350
target string Selector where spinner will be shown  
‘show’ string Shows the spinner  
‘hide’ string Hides the spinner  
text string Fallback text inside spinner ‘Loading…’
spinnerClass string Adds this class to spinner ‘spinner__element–circle’
show boolean Displays just after creating it false

Target is the selector where spinner will be shown.

// Default spinner
$('target').spinner();

// Custom spinner
$('target').spinner({
    spinnerClass: 'spinner__element--circle',
    text: 'Loading...',
    show: false
});

// Custom template
$('target').spinner({
    template: '<div>Custom Spinner</div>'
});

##events

The spinner’s target receives the event.

Event type Description Target
spinner:show This event is fired when the spinner is shown. ‘body’ or custom target
spinner:hide This event is fired when the spinner is hidden. ‘body’ or custom target
// Show the created spinner
$('target').spinner('show');

// Hide the spinner
$('target').spinner('hide');

##example

// Default target
$('body').on('spinner:show', function() {});

// Custom target
$('.myDiv').on('spinner:hide', function() {});

##Animated

You can easily add CSS3 transition to spinner when appears and disappears on the screen. You can do it through transition class. Check the next example:

.spinner {
  opacity: 0;
  pointer-events: none;
  @include transition(opacity, .3s);

  &.transition {
    opacity: 1;
    pointer-events: auto;
  }

}