1 |
|
2 |
|
3 |
|
4 |
|
5 | .spinner-grow,
|
6 | .spinner-border {
|
7 | display: inline-block;
|
8 | width: var(--#{$prefix}spinner-width);
|
9 | height: var(--#{$prefix}spinner-height);
|
10 | vertical-align: var(--#{$prefix}spinner-vertical-align);
|
11 |
|
12 | border-radius: 50%;
|
13 | animation: var(--#{$prefix}spinner-animation-speed) linear infinite var(--#{$prefix}spinner-animation-name);
|
14 | }
|
15 |
|
16 |
|
17 | @keyframes spinner-border {
|
18 | to { transform: rotate(360deg) #{"/* rtl:ignore */"}; }
|
19 | }
|
20 |
|
21 |
|
22 | .spinner-border {
|
23 |
|
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 |
|
31 |
|
32 | border: var(--#{$prefix}spinner-border-width) solid currentcolor;
|
33 | border-right-color: transparent;
|
34 | }
|
35 |
|
36 | .spinner-border-sm {
|
37 |
|
38 | --#{$prefix}spinner-width: #{$spinner-width-sm};
|
39 | --#{$prefix}spinner-height: #{$spinner-height-sm};
|
40 | --#{$prefix}spinner-border-width: #{$spinner-border-width-sm};
|
41 |
|
42 | }
|
43 |
|
44 |
|
45 |
|
46 |
|
47 |
|
48 |
|
49 | @keyframes spinner-grow {
|
50 | 0% {
|
51 | transform: scale(0);
|
52 | }
|
53 | 50% {
|
54 | opacity: 1;
|
55 | transform: none;
|
56 | }
|
57 | }
|
58 |
|
59 |
|
60 | .spinner-grow {
|
61 |
|
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 |
|
68 |
|
69 | background-color: currentcolor;
|
70 | opacity: 0;
|
71 | }
|
72 |
|
73 | .spinner-grow-sm {
|
74 | --#{$prefix}spinner-width: #{$spinner-width-sm};
|
75 | --#{$prefix}spinner-height: #{$spinner-height-sm};
|
76 | }
|
77 |
|
78 | @if $enable-reduced-motion {
|
79 | @media (prefers-reduced-motion: reduce) {
|
80 | .spinner-border,
|
81 | .spinner-grow {
|
82 | --#{$prefix}spinner-animation-speed: #{$spinner-animation-speed * 2};
|
83 | }
|
84 | }
|
85 | }
|