Spinner (spinner)

Indicate the loading state of a component or page with Bootstrap spinners, built entirely with HTML, CSS, and no JavaScript.

🔗 External documentation.

ID Label Description Schema
label Label 
            id: spinner
label: Spinner
description: 'Indicate the loading state of a component or page with Bootstrap spinners, built entirely with HTML, CSS, and no JavaScript. '
homepage: 'https://getbootstrap.com/docs/4.6/components/spinners/'
variants:
    border:
        id: border
        label: 'Border (Default)'
    border_sm:
        id: border_sm
        label: 'Border small'
    grow:
        id: grow
        label: Grow
    grow_sm:
        id: grow_sm
        label: 'Grow small'
slots:
    label:
        id: label
        label: Label
examples:
    preview:
        id: preview
        label: Preview
        renderable:
            '@component': spinner
            label: Loading...

Border (Default) ( border )

<div class="spinner-border" role="status"> <span class="sr-only">Loading...</span> </div>

Border small ( border_sm )

<div class="spinner-border spinner-border-sm" role="status"> <span class="sr-only">Loading...</span> </div>

Grow ( grow )

<div class="spinner-grow" role="status"> <span class="sr-only">Loading...</span> </div>

Grow small ( grow_sm )

<div class="spinner-grow spinner-grow-sm" role="status"> <span class="sr-only">Loading...</span> </div>