Spinners Add to shortcut list

The Spinner component presented below is designed for use in cases where the process is in progress, the results of which are still unavailable.

Default spinner

Simply use class spinner-default

Primary spinner

Simply use class spinner-primary

Success spinner

Simply use class spinner-success

Info spinner

Simply use class spinner-info

Warning spinner

Simply use class spinner-warning

Danger spinner

Simply use class spinner-danger

You can change the size of the spinner, border width, the speed of animation and colours with the variables stated in the file _variables.scss.

Sizes and examples

The following examples are some cases but not the only ones on how this component can be composed with others.
Spinner with default button

A button can show a loading indicator.

Spinner with an input field

An input field can show that it is currently loading data.

Spinner with primary button (disabled)

A button can show a loading indicator.

Buy Elephant Now!
  • Theme Settings
  • Header fixed
  • Sidebar fixed
  • Sidebar sticky*
  • Sidebar collapsed
  • Footer fixed
  • Sidebar sticky* - by scrolling up and down the page, the menu placed on the sidebar moves along with the content until the bottom of the menu is reached. Learn more