Spinner

Bootstrap 4 Spinner with Material Design UI

A Spinner also known as a Circular Progress Indicator in Material Design indicates an unspecified wait time or loading state of a component/page in an application. The Spinners are created by using HTML and CSS Animations and don't require any Javascript.

Bootstrap 4 provides 2 types of spinners - Border Spinner and Growing Spinner. To create a Border Spinner, use class .spinner-border and to create a growing spinner, use spinner-grow.

Propeller Spinner

Add .pmd-spinner class after the .spinner-border class to create Material Design based Circular Progress Indicator with Bootstrap 4 HTML Structure.

Colored Spinners

You can change the color of the spinner by adding the text color utilities after the .pmd-spinner class.

Spinner Sizes

Want Fancy larger or smaller spinner? Add .spinner-border-sm or .spinner-border-lg for additional sizes.

Spinner in Buttons

You can use the spinners in the buttons as well to showcase the loading state.

Spinner with Logo

Tired of seeing a circular loader with Loading... text and want a fancy page loader with your branding? Use the Spinner with Logo.

Configuration Options

The Propeller CSS classes apply various predefined visual enhancements to the Spinner. The table lists the available classes and their effects.

Propeller Classes	Effect	Remark
`.pmd-spinner`	To create Propeller Spinner	Required
`.pmd-logo-spinner`	Wrapper class of the Spinner with Logo	Optional