Indicate the loading state of a component or page.
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>
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>
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>