Spinners
A spinner for displaying loading state of a page or a section.
Enable Component
Enable component from within your frontal.config.js as follows
// frontal.config.js
module.exports = {
    bundles: {
        main: {
            pages: ['**/*.html'],
            components: {
                spinner: true
            }
        }
    }
}
Basic Usage
You can build your own using the previewer
<div class="spinner-border text-primary" role="status">
    <span class="visually-hidden">Loading...</span>
</div>
NameDescription
.spinner-borderBase class of the border styled spinner element
.spinner-border.spinner-border-smApplies small size to the border styled spinner
.spinner-growBase class of the grow styled spinner element
.spinner-grow.spinner-grow-smApplies small size to the grow styled spinner
Customize variables at:/library/extend/components/_spinner.scss
Component's defaults:/library/components/spinner/_defaults.scss
NameDefault valueNote
$spinner-width2rem
$spinner-height$spinner-width
$spinner-border-width.25em
$spinner-animation-speed.75s
$spinner-width-sm1rem
$spinner-height-sm$spinner-width-sm
$spinner-border-width-sm.2em

Make sure to read the Customize components and Understanding and using the design system guides.

{title}