Skip to main content

Spinner component

This is a pass through component from React-Bootstrap bootrap docs link

Basic Usage​

<>
  <Spinner animation="border" className="mie-3" screenReaderText="loading" variant="secondary" size="sm"/>
  <Spinner animation="grow" className="mie-3" screenReaderText="loading" />
</>

Color Variants​

() => {
  const variants = ['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark'];
  return variants.map((variant) => (
    <Spinner animation="border" variant={variant} className="mr-3" screenReaderText="loading" />
  ));
}

Props​

animation​

  • Type: 'border' | 'grow'
  • Default: true
  • Description: Changes the animation style of the spinner.

as​

  • Type: elementType
  • Default: div
  • Description: You can use a custom element type for this component.

bsPrefix​

  • Type: string
  • Default: 'spinner'
  • Description: Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.

children​

  • Type: element
  • Default: -
  • Description: This component may be used to wrap child elements or components.

role​

  • Type: string
  • Default: -
  • Description: An ARIA accessible role applied to the Menu component. This should generally be set to 'status'

screenReaderText​

  • Type: string
  • Default: -
  • Description: Text to be read by screen readers to provide accessibility context.

size​

  • Type: 'sm'
  • Default: -
  • Description: Component size variations.

variant​

  • Type: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light'
  • Default: -
  • Description: The visual color style of the spinner

Dependencies​

RepositoryUsage Count
frontend-app-staff-dashboard8
frontend-app-dashboard7
frontend-app-learning1

Detailed usage locations:​

frontend-app-staff-dashboard

  • src/pages/academics/program/index.jsx
  • src/pages/analytics/completion-chart/index.jsx
  • src/pages/analytics/interaction-chart/index.jsx
  • src/pages/home/updates/UpcomingEvents.jsx
  • src/pages/home/updates/recent-activity/index.jsx
  • src/pages/library/documents/index.jsx
  • src/pages/users/teams/TeamSingle.jsx
  • src/pages/view-ticket/index.jsx

frontend-app-dashboard

  • src/components/CourseTab.jsx
  • src/components/Notes.jsx
  • src/components/ProgramTab.jsx
  • src/pages/course-single/index.jsx
  • src/pages/home/updates/RecentActivity.jsx
  • src/pages/support/view-ticket/index.jsx
  • src/pages/wishlist/index.jsx

frontend-app-learning

  • src/course-home/progress-tab/grades/learning-path/index.jsx