UiBibz::Ui::Core::Notifications::Spinner
Add any of the below mentioned modifier classes to change the appearance of a spinner.
# by variable
spinner content, options, html_options
# or by block
spinner options, html_options do
content
end
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>
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
option has following symbols for argument:
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>
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="mr-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 mr-2 spinner-grow spinner-grow-sm" role="status"><span class="sr-only">Loading...</span></span>Loading...
</button>