Spinners

Indicate the loading state of a component or page.

React Bootstrap docs

Border spinner

Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
import Spinner from 'react-bootstrap/Spinner'

{/* Default border spinner */}
<Spinner animation='border' role='status'>
  <span className='visually-hidden'>Loading...</span>
</Spinner>

{/* Gray (muted) border spinner */}
<Spinner animation='border' variant='muted' role='status'>
  <span className='visually-hidden'>Loading...</span>
</Spinner>

{/* Primary border spinner */}
<Spinner animation='border' variant='primary' role='status'>
  <span className='visually-hidden'>Loading...</span>
</Spinner>

{/* Accent border spinner */}
<Spinner animation='border' variant='accent' role='status'>
  <span className='visually-hidden'>Loading...</span>
</Spinner>

{/* Secondary border spinner */}
<Spinner animation='border' variant='secondary' role='status'>
  <span className='visually-hidden'>Loading...</span>
</Spinner>

{/* Success border spinner */}
<Spinner animation='border' variant='success' role='status'>
  <span className='visually-hidden'>Loading...</span>
</Spinner>

{/* Danger border spinner */}
<Spinner animation='border' variant='danger' role='status'>
  <span className='visually-hidden'>Loading...</span>
</Spinner>

{/* Warning border spinner */}
<Spinner animation='border' variant='warning' role='status'>
  <span className='visually-hidden'>Loading...</span>
</Spinner>

{/* Info border spinner */}
<Spinner animation='border' variant='info' role='status'>
  <span className='visually-hidden'>Loading...</span>
</Spinner>

{/* Light border spinner */}
<Spinner animation='border' variant='light' role='status'>
  <span className='visually-hidden'>Loading...</span>
</Spinner>

{/* Dark border spinner */}
<Spinner animation='border' variant='dark' role='status'>
  <span className='visually-hidden'>Loading...</span>
</Spinner>

Growing spinner

Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
import Spinner from 'react-bootstrap/Spinner'

{/* Default growing spinner */}
<Spinner animation='grow' role='status'>
  <span className='visually-hidden'>Loading...</span>
</Spinner>

{/* Gray (muted) growing spinner */}
<Spinner animation='grow' variant='muted' role='status'>
  <span className='visually-hidden'>Loading...</span>
</Spinner>

{/* Primary growing spinner */}
<Spinner animation='grow' variant='primary' role='status'>
  <span className='visually-hidden'>Loading...</span>
</Spinner>

{/* Accent growing spinner */}
<Spinner animation='grow' variant='accent' role='status'>
  <span className='visually-hidden'>Loading...</span>
</Spinner>

{/* Secondary growing spinner */}
<Spinner animation='grow' variant='secondary' role='status'>
  <span className='visually-hidden'>Loading...</span>
</Spinner>

{/* Success growing spinner */}
<Spinner animation='grow' variant='success' role='status'>
  <span className='visually-hidden'>Loading...</span>
</Spinner>

{/* Danger growing spinner */}
<Spinner animation='grow' variant='danger' role='status'>
  <span className='visually-hidden'>Loading...</span>
</Spinner>

{/* Warning growing spinner */}
<Spinner animation='grow' variant='warning' role='status'>
  <span className='visually-hidden'>Loading...</span>
</Spinner>

{/* Info growing spinner */}
<Spinner animation='grow' variant='info' role='status'>
  <span className='visually-hidden'>Loading...</span>
</Spinner>

{/* Light growing spinner */}
<Spinner animation='grow' variant='light' role='status'>
  <span className='visually-hidden'>Loading...</span>
</Spinner>

{/* Dark growing spinner */}
<Spinner animation='grow' variant='dark' role='status'>
  <span className='visually-hidden'>Loading...</span>
</Spinner>

Size

Loading...
Loading...
Loading...
Loading...
import Spinner from 'react-bootstrap/Spinner'

{/* Small border spinner */}
<Spinner animation='border' size='sm' role='status'>
  <span className='visually-hidden'>Loading...</span>
</Spinner>

{/* Small growing spinner */}
<Spinner animation='grow' size='sm' role='status'>
  <span className='visually-hidden'>Loading...</span>
</Spinner>

{/* Custom size border spinner */}
<Spinner animation='border' role='status' style={{width: '3rem', height: '3rem'}}>
  <span className='visually-hidden'>Loading...</span>
</Spinner>

{/* Custom size growing spinner */}
<Spinner animation='grow' role='status' style={{width: '3rem', height: '3rem'}}>
  <span className='visually-hidden'>Loading...</span>
</Spinner>

Inside button

import Spinner from 'react-bootstrap/Spinner'
import Button from 'react-bootstrap/Button'

{/* Button with border spinner */}
<Button variant='primary btn-icon'>
  <Spinner animation='border' size='sm' role='status'>
    <span className='visually-hidden'>Loading...</span>
  </Spinner>
</Button>

{/* Button with border spinner and text */}
<Button variant='primary'>
  <Spinner animation='border' size='sm' role='status' className='me-2' />
  Loading...
</Button>

{/* Button with growing spinner */}
<Button variant='secondary btn-icon'>
  <Spinner animation='grow' size='sm' role='status'>
    <span className='visually-hidden'>Loading...</span>
  </Spinner>
</Button>

{/* Button with growing spinner and text */}
<Button variant='secondary'>
  <Spinner animation='grow' size='sm' role='status' className='me-2' />
  Loading...
</Button>