Description
This pull request introduces a new feature of adding a spinner-border component in Bootstrap that rotates in the opposite direction. With the addition of this new feature, it will be possible to easily have two spinner-border components that rotate in opposite directions. The changes I added include changes in the spinner .scss file, where the class .spinner-border-reverse introduces this behavior. The changes also introduce a corresponding modification of the documentation.
It is also possible to apply the same modification to the spinner-grow so it grows in the opposite direction.
Motivation & Context
In some use cases, it may be necessary to use two different spinners, one to indicate that an action is currently being processed, and the other to indicate that an action is complete and the process is reversing. The spinner-border component in its current state only rotates in one direction, making it difficult to clearly distinguish between the two different states. With the addition of this new feature, it will be possible to use a spinner-border component that rotates in the opposite direction, providing a clearer visual representation of the processing status of an action.
Moreover, this feature will enhance the accessibility of the spinner-border component. Some users, such as those with visual impairement, may have a difficult time noticing the difference between two different spinners if they have different colors. Hence, adding this feature is helpful.
Type of changes
-
Bug fix (non-breaking change which fixes an issue) -
New feature (non-breaking change which adds functionality) -
Refactoring (non-breaking change) -
Breaking change (fix or feature that would change existing functionality)
Checklist
-
I have read the contributing guidelines -
My code follows the code style of the project (using npm run lint) -
My change introduces changes to the documentation -
I have updated the documentation accordingly -
I have added tests to cover my changes -
All new and existing tests passed
Live previews
The GIF below is converted from a screen recording of the implemented feature:
Update in the documentation: https://deploy-preview-37990--twbs-bootstrap.netlify.app/docs/5.3/components/spinners/#direction