Spinners

Show loading states with border and grow spinners, color utilities, and small variants.

Spinners indicate loading state without reporting progress. They are built with HTML and CSS only, so application code decides when to show or hide them. Provide text for assistive technology, and pair the spinner with nearby status text when the wait may be long.

Use border spinners for the default loading indicator. Spinner child content is rendered for assistive technologies.

<bs-div display="Flex" gap="Default3" align-items="Center">
    <bs-spinner>Loading...</bs-spinner>
</bs-div>
            

Use growing spinners when the expanding pulse better fits the surrounding UI.

<bs-spinner spinner-type="Grow">Loading...</bs-spinner>
            

Spinners inherit their current text color, so BCL text color attributes provide the same semantic variants as Bootstrap text utilities. Do not rely on color alone to communicate status.

<bs-div display="Flex" gap="Default3" align-items="Center">
    <bs-spinner text-color="Primary">Loading...</bs-spinner>
    <bs-spinner text-color="Secondary">Loading...</bs-spinner>
    <bs-spinner text-color="Success">Loading...</bs-spinner>
    <bs-spinner text-color="Danger">Loading...</bs-spinner>
    <bs-spinner text-color="Warning">Loading...</bs-spinner>
    <bs-spinner text-color="Info">Loading...</bs-spinner>
</bs-div>
            

Use Bootstrap flex and text alignment utilities around the spinner to position it.

<bs-div text-alignment="Center" bottom-margin="Default3">
    <bs-spinner>Loading...</bs-spinner>
</bs-div>
<bs-div display="Flex" justify-content="Center" bottom-margin="Default3">
    <bs-spinner spinner-type="Grow">Loading...</bs-spinner>
</bs-div>
            

Bootstrap margin utilities can be applied directly to the spinner helper.

<bs-spinner margin="Default5">Loading...</bs-spinner>
            

Use placement utilities on the helper or its wrapper when the spinner needs to align with neighboring content.

<bs-div clearfix="true">
    <bs-spinner float="End">Loading...</bs-spinner>
</bs-div>
            

Use small spinner types in compact controls or dense layouts.

<bs-div display="Flex" gap="Default3" align-items="Center" flex-wrap="Wrap">
    <bs-spinner spinner-type="BorderSmall">Loading...</bs-spinner>
    <bs-spinner spinner-type="GrowSmall">Loading...</bs-spinner>
</bs-div>
            

Place small spinners inside disabled buttons while async work is in progress. Keep readable button text next to the spinner so the loading state remains clear.

<bs-div display="Flex" gap="Default3" align-items="Center" flex-wrap="Wrap">
    <bs-button btn-style="Primary" disabled="true">
        <bs-spinner spinner-type="BorderSmall">Loading...</bs-spinner>
        Loading
    </bs-button>
    <bs-button btn-style="Secondary" disabled="true">
        <bs-spinner spinner-type="GrowSmall">Loading...</bs-spinner>
        Saving
    </bs-button>
</bs-div>
            

Spinner motion, dimensions, and border behavior come from Bootstrap CSS. BCL helpers choose the border or grow class and leave theming to the approved Bootstrap stylesheet.

Variables

Use Bootstrap's spinner CSS variables through approved stylesheets when changing width, height, animation speed, or vertical alignment.

Sass variables

Projects that compile Bootstrap Sass can adjust spinner defaults before publishing the CSS bundle consumed by the docs app.

Keyframes

Border and grow spinners rely on Bootstrap's spinner keyframes. The helper emits the relevant classes; it does not redefine animation keyframes.