Spinner
A spinning animation that indicates loading.
This is a pass through component from React-Bootstrap.
See React-Bootstrap for documentation.
Basic Usage
Show editable code example
Any Paragon component or export may be added to the code example.
Color Variants
Show editable code example
Any Paragon component or export may be added to the code example.
Theme Variables (SCSS)#
$spinner-width: 2rem !default;$spinner-height: $spinner-width !default;$spinner-border-width: .25em !default;$spinner-width-sm: 1rem !default;$spinner-height-sm: $spinner-width-sm !default;$spinner-border-width-sm: .2em !default;
Props API#
Spinner Props API
This is a pass through component from React-Bootstrap, see original props documentation here.
- className
stringSpecifies the class name for the component.
- screenReaderText
nodeSpecifies the screen reader content for a11y.
Usage Insights#
Spinner
| Project Name | Paragon Version | Instance Count | |
|---|---|---|---|
| edx-ora2 | 21.13.1 | 1 | |
| frontend-app-account | 22.9.0 | 4 | |
| frontend-app-admin-portal | 21.13.1 | 25 | |
| frontend-app-authn | 22.10.0 | 3 | |
| frontend-app-communications | 22.7.0 | 1 | |
| frontend-app-course-authoring | 22.8.1 | 13 | |
| frontend-app-discussions | 22.7.0 | 11 | |
| frontend-app-enterprise-public-catalog | 21.13.1 | 3 | |
| frontend-app-learner-dashboard | 22.9.0 | 1 | |
| frontend-app-learner-portal-enterprise | 21.13.1 | 3 | |
| frontend-app-learning | 22.8.1 | 4 | |
| frontend-app-library-authoring | 21.11.3 | 1 | |
| frontend-app-ora-grading | 21.11.3 | 3 | |
| frontend-app-publisher | 21.13.1 | 2 | |
| frontend-app-support-tools | 21.13.1 | 1 | |
| frontend-component-header-edx | 21.13.1 | 1 | |
| frontend-lib-special-exams | 22.7.0 | 2 | |
| prospectus | 20.46.2 | 4 |