5 @keyframes spinner-border {
6 to { transform: rotate(360deg); }
10 display: inline-block;
11 width: $spinner-width;
12 height: $spinner-height;
13 vertical-align: text-bottom;
14 border: $spinner-border-width solid currentColor;
15 border-right-color: transparent;
16 // stylelint-disable-next-line property-disallowed-list
18 animation: .75s linear infinite spinner-border;
22 width: $spinner-width-sm;
23 height: $spinner-height-sm;
24 border-width: $spinner-border-width-sm;
31 @keyframes spinner-grow {
42 display: inline-block;
43 width: $spinner-width;
44 height: $spinner-height;
45 vertical-align: text-bottom;
46 background-color: currentColor;
47 // stylelint-disable-next-line property-disallowed-list
50 animation: .75s linear infinite spinner-grow;
54 width: $spinner-width-sm;
55 height: $spinner-height-sm;
58 @if $enable-prefers-reduced-motion-media-query {
59 @media (prefers-reduced-motion: reduce) {
62 animation-duration: 1.5s;