Spinner components are simple visual components for indicating loading states. They come in two styles (dots & round) and they can be created by using the two mixins provided in the _spinner.scss partial file.
Making a dotted spinner component
To make a dotted spinner component, use the make-spinner-dots mixin.
Definition
make-spinner-dots(
$spinner-dots-name,
$spinner-dots-height,
$spinner-dots-animation-time)
Parameters
- $spinner-dots-name : The class name of the dotted spinner component.
- $spinner-dots-height : The height of the dotted spinner component. [1][2]
- $spinner-dots-animation-time : The animation time of the dotted spinner component.
Notes:
- [1] : The value of $spinner-dots-height can be specified in
em, px etc. but it is suggested that you specify it in the same measurement as the text base.
- [2] : The value of $spinner-dots-height will be used for both the size of the component and the animation. Some tweaking might be required.
Making a round spinner component
To make a round spinner component, use the make-spinner-round mixin.
Definition
make-spinner-round(
$spinner-round-name,
$spinner-round-size,
$spinner-round-doughnut-style,
$spinner-round-spin-style,
$spinner-round-animation-time)
Parameters
- $spinner-round-name : The class name of the round spinner component.
- $spinner-round-size : The size of the round spinner component. [1]
- $spinner-round-doughnut-style : The doughnut style of the round spinner component. [2]
- $spinner-round-spin-style : The spinning part style of the round spinner component. [2]
- $spinner-round-animation-time : The animation time of the round spinner component.
Notes:
- [1] : The value of $spinner-round-size affects both height and width of the component.
- [2] : The values of $spinner-round-doughnut-style and $spinner-round-spin-style are styles specified in border style format.
- Spinner components use animations that might conflict with user-specific animations because of naming. These animations are named
spin-dots and spin-round accordingly.
- Some styling has been predefined such as the dotted spinner's text and the starting point of the round spinner to be on the left. These choices can be changed manually.