56 lines
2.4 KiB
SCSS
56 lines
2.4 KiB
SCSS
/*
|
|
Mixin for dotted spinner component.
|
|
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.
|
|
*/
|
|
@mixin make-spinner-dots($spinner-dots-name, $spinner-dots-height, $spinner-dots-animation-time){
|
|
.#{$spinner-dots-name}{
|
|
display: inline-block;
|
|
overflow: hidden;
|
|
height: $spinner-dots-height;
|
|
vertical-align: bottom;
|
|
&:after{
|
|
display: inline-table;
|
|
white-space: pre;
|
|
content: "\A.\A..\A...";
|
|
animation: spin-dots $spinner-dots-animation-time steps(4) infinite;
|
|
}
|
|
}
|
|
@keyframes spin-dots { to {transform: translateY(-$spinner-dots-height*4);} }
|
|
}
|
|
/*
|
|
Mixin for dotted spinner component.
|
|
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.
|
|
*/
|
|
@mixin make-spinner-round( $spinner-round-name, $spinner-round-size, $spinner-round-doughnut-style,
|
|
$spinner-round-spin-style, $spinner-round-animation-time ){
|
|
.#{$spinner-round-name}{
|
|
display: inline-block;
|
|
border: $spinner-round-doughnut-style;
|
|
border-left: $spinner-round-spin-style;
|
|
transform: translateZ(0);
|
|
animation: spin-round $spinner-round-animation-time infinite linear;
|
|
&,&:after{
|
|
border-radius: 50%;
|
|
width: $spinner-round-size;
|
|
height: $spinner-round-size;
|
|
}
|
|
}
|
|
@keyframes spin-round { 0% {transform: rotate(0deg);} 100% {transform: rotate(360deg);} }
|
|
} |