Bootstrap 4 Spinner with Material Design UI
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
.pmd-spinner class after the
.spinner-border class to create Material Design based Circular Progress Indicator with Bootstrap 4 HTML Structure.
You can change the color of the spinner by adding the text color utilities after the
Want Fancy larger or smaller spinner? Add
.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.
The Propeller CSS classes apply various predefined visual enhancements to the Spinner. The table lists the available classes and their effects.
||To create Propeller Spinner||Required|
||Wrapper class of the Spinner with Logo||Optional|