|
|
|
|
|
|
|
|
|
@keyframes spinner-border { |
|
to { transform: rotate(360deg) #{""}; } |
|
} |
|
|
|
.spinner-border { |
|
display: inline-block; |
|
width: $spinner-width; |
|
height: $spinner-height; |
|
vertical-align: text-bottom; |
|
border: $spinner-border-width solid currentColor; |
|
border-right-color: transparent; |
|
|
|
border-radius: 50%; |
|
animation: $spinner-animation-speed linear infinite spinner-border; |
|
} |
|
|
|
.spinner-border-sm { |
|
width: $spinner-width-sm; |
|
height: $spinner-height-sm; |
|
border-width: $spinner-border-width-sm; |
|
} |
|
|
|
|
|
|
|
|
|
|
|
@keyframes spinner-grow { |
|
0% { |
|
transform: scale(0); |
|
} |
|
50% { |
|
opacity: 1; |
|
transform: none; |
|
} |
|
} |
|
|
|
.spinner-grow { |
|
display: inline-block; |
|
width: $spinner-width; |
|
height: $spinner-height; |
|
vertical-align: text-bottom; |
|
background-color: currentColor; |
|
|
|
border-radius: 50%; |
|
opacity: 0; |
|
animation: $spinner-animation-speed linear infinite spinner-grow; |
|
} |
|
|
|
.spinner-grow-sm { |
|
width: $spinner-width-sm; |
|
height: $spinner-height-sm; |
|
} |
|
|
|
@if $enable-reduced-motion { |
|
@media (prefers-reduced-motion: reduce) { |
|
.spinner-border, |
|
.spinner-grow { |
|
animation-duration: $spinner-animation-speed * 2; |
|
} |
|
} |
|
} |
|
|