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