8 width: var(--#{$prefix}spinner-width);
9 height: var(--#{$prefix}spinner-height);
10 vertical-align: var(--#{$prefix}spinner-vertical-align);
11 // stylelint-disable-next-line property-disallowed-list
13 animation: var(--#{$prefix}spinner-animation-speed) linear infinite var(--#{$prefix}spinner-animation-name);
16 // scss-docs-start spinner-border-keyframes
17 @keyframes spinner-border {
18 to { transform: rotate(360deg) #{"/* rtl:ignore */"}; }
20 // scss-docs-end spinner-border-keyframes
23 // scss-docs-start spinner-border-css-vars
24 --#{$prefix}spinner-width: #{$spinner-width};
25 --#{$prefix}spinner-height: #{$spinner-height};
26 --#{$prefix}spinner-vertical-align: #{$spinner-vertical-align};
27 --#{$prefix}spinner-border-width: #{$spinner-border-width};
28 --#{$prefix}spinner-animation-speed: #{$spinner-animation-speed};
29 --#{$prefix}spinner-animation-name: spinner-border;
30 // scss-docs-end spinner-border-css-vars
32 border: var(--#{$prefix}spinner-border-width) solid currentcolor;
33 border-right-color: transparent;
37 // scss-docs-start spinner-border-sm-css-vars
38 --#{$prefix}spinner-width: #{$spinner-width-sm};
39 --#{$prefix}spinner-height: #{$spinner-height-sm};
40 --#{$prefix}spinner-border-width: #{$spinner-border-width-sm};
41 // scss-docs-end spinner-border-sm-css-vars
48 // scss-docs-start spinner-grow-keyframes
49 @keyframes spinner-grow {
58 // scss-docs-end spinner-grow-keyframes
61 // scss-docs-start spinner-grow-css-vars
62 --#{$prefix}spinner-width: #{$spinner-width};
63 --#{$prefix}spinner-height: #{$spinner-height};
64 --#{$prefix}spinner-vertical-align: #{$spinner-vertical-align};
65 --#{$prefix}spinner-animation-speed: #{$spinner-animation-speed};
66 --#{$prefix}spinner-animation-name: spinner-grow;
67 // scss-docs-end spinner-grow-css-vars
69 background-color: currentcolor;
74 --#{$prefix}spinner-width: #{$spinner-width-sm};
75 --#{$prefix}spinner-height: #{$spinner-height-sm};
78 @if $enable-reduced-motion {
79 @media (prefers-reduced-motion: reduce) {
82 --#{$prefix}spinner-animation-speed: #{$spinner-animation-speed * 2};