Spinner | Bootstrap Svelte

Playground

Experiment with the Spinner component by adjusting the props below:

Interactive Playground

Controls

Type

Size

Color Variant

Include Screen Reader Text

Screen Reader Text

Preview

Code

            
            <Spinner>
  <span class="visually-hidden">Loading...</span>
</Spinner>

Basic Example

Bootstrap's spinners are designed to be used as loading indicators, primarily for asynchronous operations. The default style is a border spinner.

            
            <Spinner>
  <span class="visually-hidden">Loading...</span>
</Spinner>

Growing Spinner

If you prefer a different style, you can use the growing spinner with the type="grow" prop.

            
            <Spinner type="grow">
  <span class="visually-hidden">Loading...</span>
</Spinner>

Color Variants

Customize the spinner by using the colorVariant prop to match your project's color theme.

            
            <Spinner colorVariant="primary">
  <span class="visually-hidden">Loading primary...</span>
</Spinner>
<Spinner colorVariant="secondary">
  <span class="visually-hidden">Loading secondary...</span>
</Spinner>
<Spinner colorVariant="success">
  <span class="visually-hidden">Loading success...</span>
</Spinner>
<Spinner colorVariant="danger">
  <span class="visually-hidden">Loading danger...</span>
</Spinner>
<Spinner colorVariant="warning">
  <span class="visually-hidden">Loading warning...</span>
</Spinner>
<Spinner colorVariant="info">
  <span class="visually-hidden">Loading info...</span>
</Spinner>
<Spinner colorVariant="light">
  <span class="visually-hidden">Loading light...</span>
</Spinner>
<Spinner colorVariant="dark">
  <span class="visually-hidden">Loading dark...</span>
</Spinner>

Growing Color Variants

The growing spinner also supports all color variants.

            
            <Spinner type="grow" colorVariant="primary">
  <span class="visually-hidden">Loading primary...</span>
</Spinner>
<Spinner type="grow" colorVariant="secondary">
  <span class="visually-hidden">Loading secondary...</span>
</Spinner>
<Spinner type="grow" colorVariant="success">
  <span class="visually-hidden">Loading success...</span>
</Spinner>
<Spinner type="grow" colorVariant="danger">
  <span class="visually-hidden">Loading danger...</span>
</Spinner>
<Spinner type="grow" colorVariant="warning">
  <span class="visually-hidden">Loading warning...</span>
</Spinner>
<Spinner type="grow" colorVariant="info">
  <span class="visually-hidden">Loading info...</span>
</Spinner>
<Spinner type="grow" colorVariant="light">
  <span class="visually-hidden">Loading light...</span>
</Spinner>
<Spinner type="grow" colorVariant="dark">
  <span class="visually-hidden">Loading dark...</span>
</Spinner>

Placement

You can place the spinner in various locations within your layout. The spinner will automatically adjust its position based on the surrounding elements.

Flex

            
            <div class="d-flex justify-content-center">
    <Spinner>
        <span class="visually-hidden">Loading...</span>
    </Spinner>
</div>

Loading...

            
            <div class="d-flex align-items-center">
    <strong role="status">Loading...</strong>
    <Spinner class="ms-auto"></Spinner>
</div>

Floats

            
            <div class="clearfix">
    <Spinner class="float-end">
        <span class="visually-hidden">Loading...</span>
    </Spinner>
</div>

Text align

            
            <div class="text-center">
    <Spinner>
        <span class="visually-hidden">Loading...</span>
    </Spinner>
</div>

Sizing

You can use the size prop to make the spinner smaller. By default, the spinner uses the standard size. Set size="sm" for the small variant.

Or, use custom CSS or inline styles to change the dimensions as needed.

            
            <Spinner size="sm">
  <span class="visually-hidden">Loading...</span>
</Spinner>
<Spinner>
  <span class="visually-hidden">Loading...</span>
</Spinner>
<Spinner style="width: 3rem; height: 3rem;">
  <span class="visually-hidden">Loading...</span>
</Spinner>

Button Spinners

Spinners can be used inside buttons to indicate an action is currently processing or taking place.

            
            <button class="btn btn-primary" type="button" disabled>
  <Spinner size="sm" colorVariant="light">
    <span class="visually-hidden">Loading...</span>
  </Spinner>
  Loading...
</button>

Centered Button Spinner

You can also center the spinner in a button and add margin for better alignment:

            
            <button class="btn btn-primary" type="button" disabled>
  <Spinner size="sm" colorVariant="light">
    <span class="visually-hidden">Loading...</span>
  </Spinner>
  <span class="ms-2">Loading...</span>
</button>

Growing Button Spinner

You can also use the growing spinner inside buttons:

            
            <button class="btn btn-primary" type="button" disabled>
  <Spinner size="sm" type="grow" colorVariant="light">
    <span class="visually-hidden">Loading...</span>
  </Spinner>
  <span class="ms-2">Loading...</span>
</button>

API Reference

Props

Name	Type	Default	Description
`class`	`string`	`undefined`	Additional CSS classes to apply to the component.
`elementRef`	`HTMLElement \| null`	`null`	Reference to the DOM element
`id`	`string`	—	Unique identifier for the spinner. If not specified, it will be auto-generated.
`size`	`string`	—	Sets the spinner size. Values: 'sm'
`type`	`string`	`'border'`	Spinner type. Values: 'border', 'grow'
`colorVariant`	`string`	—	Sets the spinner's color. Values: 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark'

Accessibility

For improved accessibility, it's important to include screen reader text within the spinner to indicate its purpose. This can be done by adding a <span class="visually-hidden">Loading...</span> inside the Spinner component.

CSS Classes

The component applies Bootstrap's spinner classes based on the provided props:

spinner-border or spinner-grow - Applied as the base class depending on type
spinner-border-sm or spinner-grow-sm - Applied when size="sm"
text-{variant} - Applied based on the variant prop