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 Spinner
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 |