Spinner(ui_spinner)Bootstrap Logo

UiBibz::Ui::Core::Notifications::Spinner

Add any of the below mentioned modifier classes to change the appearance of a spinner.

Usage

This component is an extension of component element. A Ui Bibz component consists of 3 arguments:
  • content[value/block]
  • html_options[hash]<default: {}>
  • options[hash]<default: {}>

 # by variable 
 spinner content, options, html_options 

 # or by block 
 spinner options, html_options do 
   content 
 end

Options

The specific options for this component are:
  • action[string](use component stimulus-options method)
  • cache[string](use to cache your component)
  • controller[string](use component stimulus-options method)
  • popover[string/hash](use component popover method)
  • size[symbol](:lg, :md, :sm)(use component size method)
  • state[symbol](:disabled, :active)(use component state method)
  • status[symbol](:primary, :secondary, :success, :danger, :warning, :info, :light, :dark)(use component status method)
  • target[string](use component stimulus-options method)
  • tooltip[string/hash](use component tooltip method)
  • turbo[string](use component turbo method)
  • type[symbol](:border, :grow)

Examples

Some examples explain how to use the options present in the component.

Spinner

ui_spinner 'Primary', status: :primary
ui_spinner 'Secondary', status: :secondary
ui_spinner 'Success', status: :success
ui_spinner 'Danger', status: :danger
ui_spinner 'Warning', status: :warning
ui_spinner 'Info', status: :info
ui_spinner 'Light', status: :light
ui_spinner 'Dark', status: :dark

<div class="text-primary spinner-border" role="status"><span class="sr-only">Primary</span></div>
<div class="text-secondary spinner-border" role="status"><span class="sr-only">Secondary</span></div>
<div class="text-success spinner-border" role="status"><span class="sr-only">Success</span></div>
<div class="text-danger spinner-border" role="status"><span class="sr-only">Danger</span></div>
<div class="text-warning spinner-border" role="status"><span class="sr-only">Warning</span></div>
<div class="text-info spinner-border" role="status"><span class="sr-only">Info</span></div>
<div class="text-light spinner-border" role="status"><span class="sr-only">Light</span></div>
<div class="text-dark spinner-border" role="status"><span class="sr-only">Dark</span></div>

Type

ui_spinner 'Primary', status: :primary, type: :grow
ui_spinner 'Secondary', status: :secondary, type: :grow
ui_spinner 'Success', status: :success, type: :grow
ui_spinner 'Danger', status: :danger, type: :grow
ui_spinner 'Warning', status: :warning, type: :grow
ui_spinner 'Info', status: :info, type: :grow
ui_spinner 'Light', status: :light, type: :grow
ui_spinner 'Dark', status: :dark, type: :grow

<div class="text-primary spinner-grow" role="status"><span class="sr-only">Primary</span></div>
<div class="text-secondary spinner-grow" role="status"><span class="sr-only">Secondary</span></div>
<div class="text-success spinner-grow" role="status"><span class="sr-only">Success</span></div>
<div class="text-danger spinner-grow" role="status"><span class="sr-only">Danger</span></div>
<div class="text-warning spinner-grow" role="status"><span class="sr-only">Warning</span></div>
<div class="text-info spinner-grow" role="status"><span class="sr-only">Info</span></div>
<div class="text-light spinner-grow" role="status"><span class="sr-only">Light</span></div>
<div class="text-dark spinner-grow" role="status"><span class="sr-only">Dark</span></div>

Size

The size option has following symbols for argument:
  • :lg
  • :md
  • :sm
ui_spinner "Large Spinner", size: :lg
ui_spinner "Medium Spinner", size: :md
ui_spinner "Small Spinner", size: :sm

<div class="spinner-border spinner-border-lg" role="status"><span class="sr-only">Large Spinner</span></div>
<div class="spinner-border spinner-border-md" role="status"><span class="sr-only">Medium Spinner</span></div>
<div class="spinner-border spinner-border-sm" role="status"><span class="sr-only">Small Spinner</span></div>

Buttons

ui_button "Loading...", status: :primary, spinner: true, text: false
ui_button "Loading...", status: :primary, spinner: true
ui_button "Loading...", status: :secondary, spinner: { status: :success, type: :grow }, text: false
ui_button "Loading...", status: :warning, spinner: { type: :grow, status: :danger }
ui_button "Loading...", spinner: true

<button class="btn-primary btn without-text">
  <span class="spinner-border spinner-border-sm" role="status"><span class="sr-only">Loading...</span></span>
</button>
<button class="btn-primary btn">
  <span class="me-2 spinner-border spinner-border-sm" role="status"><span class="sr-only">Loading...</span></span>Loading...
</button>
<button class="btn-secondary btn without-text">
  <span class="text-success spinner-grow spinner-grow-sm" role="status"><span class="sr-only">Loading...</span></span>
</button>
<button class="btn-warning btn">
  <span class="text-danger me-2 spinner-grow spinner-grow-sm" role="status"><span class="sr-only">Loading...</span></span>Loading...
</button>