Loading...

Loading indicators View all kinds of Loading indicators examples below.

Loading indicators

Loading indicators are used to indicate loading actions.

Basic

The examples below use images for spinners. There are two options available: a light spinner for dark backgrounds overlays and a dark one for light backgrounds overlays.

CSS3 Animations

Spinners are used to indicate loading actions.

Common styles

Framework inherited

The core color helpers can be applied to all kind of elements from buttons to icons, headers, headings, etc. They do not change when you switch to a different theme from the same template.

Theme inherited

These are the template default color schemes and are used site wide to consistently style common elements. For the primary color you must add .bg-primaryand for the secondary color you must add .ui-state-default. Note that theme two styles change based on what color scheme you choose for your template.

Basic

Spinners are used to indicate loading actions.

Alternate

Spinners are used to indicate loading actions.

Loading...

We're almost done!

Loading...

Wait...

Stand by...

Spinning icons

Use the markup below to create Spinner icons. Add the respective icon CSS class to the element that has the .glyph-iconCSS class. To add a rotation animation, add the .icon-spinCSS class.

Online
Idle
Offline
Cloud status
Latest transfers
Tasks for today
Pending notifications New