Please wait...
Page is loading

Btn Spinner

Btn Spinner adds a spinner on dom elements to indicates something is loading. It's main use is on buttons submitting an AJAX request.

Getting started

To use Btn Spinner simply include in your js file 

//= require vendor/jquery.btn-spinner
//= require initializers/btn-spinner

and in your sass file 

//= require vendor/jquery.btn-spinner

Default behaviour

Btn Spinner create a clone of the object (usually button), append it right before the original object and hides the original object. The content of the cloned object is replaced with a div with the class ._btn-spinner, this class puts border color, width, and radius and adds the spinning effect.

things to note about Btn Spinner:

  • its with and height is 1em which means it will receive the object's font size, that's why .btn-lg has a bigger spinner the .btn
  • it's an inline-block element which means it will receive text-align from the object containing it
  • it will inherit the color of the object it's spinning in
  • its default border-width is 0.175rem
  • its default opacity is 0.8
  • it disables the object's actions when it's spinning
.row
  .col-12.col-md-auto
    =button_tag 'small spinner', class: 'btn btn-block btn-light btn-sm btn-spinner', type: 'button'
  .col-12.col-md-auto
    =button_tag 'spinner', class: 'btn btn-block btn-light btn-spinner', type: 'button'
  .col-24.col-md-auto.mt-2.mt-md-0
    =button_tag 'large spinner', class: 'btn btn-block btn-light btn-lg btn-spinner', type: 'button'

Colors

Since Btn Spinner inherits the color of the object it is spinning in, placing it inside .btn will set the color of the spinner correctly. 

.row
  .col-12.col-md-auto
    =button_tag 'spinner', class: 'btn btn-light btn-block btn-spinner', type: 'button'
  .col-12.col-md-auto
    =button_tag 'spinner', class: 'btn btn-dark btn-block btn-spinner', type: 'button'
  .col-12.col-md-auto.mt-2.mt-md-0
    =button_tag 'spinner', class: 'btn btn-success btn-block btn-spinner', type: 'button'
  .col-12.col-md-auto.mt-2.mt-md-0
    =button_tag 'spinner', class: 'btn btn-primary btn-block btn-spinner', type: 'button'
  .col-12.col-md-auto.mt-2.mt-md-0
    =button_tag 'spinner', class: 'btn btn-info btn-block btn-spinner', type: 'button'
  .col-12.col-md-auto.mt-2.mt-md-0
    =button_tag 'spinner', class: 'btn btn-danger btn-block btn-spinner', type: 'button'

Custom spinner (color, size and width)

you can customize the spinner using the ._btn-spinner class, just change border-width, the width and height or the color. if you want the spinner to be on the left side of the object you can either set the object's text-align to the left or even set ._btn-spinner to float left. 

.row
  .col-12.col-md-auto
    .red-spinner=button_tag 'red spinner', class: 'btn btn-light btn-block btn-spinner', type: 'button'
  .col-12.col-md-auto
    .thick-spinner=button_tag 'thick spinner', class: 'btn btn-light btn-block btn-spinner', type: 'button'
  .col-12.col-md-auto.mt-2.mt-md-0
    .large-spinner=button_tag 'large spinner', class: 'btn btn-light btn-block btn-spinner', type: 'button'
  .col-12.col-md-auto.mt-2.mt-md-0
    .left-spinner=button_tag 'left spinner', class: 'btn btn-light btn-block btn-spinner', type: 'button'

:sass
  .left-spinner ._btn-spinner
    float: left
  .thick-spinner ._btn-spinner
    border-width: 0.25rem
  .large-spinner ._btn-spinner
    width: 1.5rem
    height: 1.5rem
  .red-spinner ._btn-spinner
    color: red

Disable spinner

You can disable default spinner functionality by placing the attr {'data-spin-on-ajax': 'false'} on the button / form.

Form with spinner
Form without spinner
Remote link
With spinner
Without spinner 
%form{'data-remote': 'true', action: plugins_btn_spinner_path}
  %h5 Form with spinner
  .form-row
    .form-group.col-12=text_field_tag 'form-submit-spinner-text-field', nil, class: 'form-control '
    .form-group.col-12=submit_tag 'submit', class: 'btn btn-primary'
%form{'data-remote': 'true', 'data-spin-on-ajax': 'false', action: plugins_btn_spinner_path}
  %h5 Form without spinner
  .form-row
    .form-group.col-12=text_field_tag 'form-submit-spinner-text-field', nil, class: 'form-control '
    .form-group.col-12=submit_tag 'submit', class: 'btn btn-primary'
%h5.mt-2 Remote link
.row
  .col-24.col-md-auto
    =link_to 'With spinner', plugins_btn_spinner_path, remote: true, class: 'btn btn-light'
  .col-24.col-md-auto.mt-2.mt-md-0
    =link_to 'Without spinner', plugins_btn_spinner_path, remote: true, class: 'btn btn-light', 'data-spin-on-ajax': 'false'
On this page