| 1 |
efrain |
1 |
//
|
|
|
2 |
// Rotating border
|
|
|
3 |
//
|
|
|
4 |
|
| 1441 |
ariadna |
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 |
// stylelint-disable-next-line property-disallowed-list
|
|
|
12 |
border-radius: 50%;
|
|
|
13 |
animation: var(--#{$prefix}spinner-animation-speed) linear infinite var(--#{$prefix}spinner-animation-name);
|
|
|
14 |
}
|
|
|
15 |
|
|
|
16 |
// scss-docs-start spinner-border-keyframes
|
| 1 |
efrain |
17 |
@keyframes spinner-border {
|
| 1441 |
ariadna |
18 |
to { transform: rotate(360deg) #{"/* rtl:ignore */"}; }
|
| 1 |
efrain |
19 |
}
|
| 1441 |
ariadna |
20 |
// scss-docs-end spinner-border-keyframes
|
| 1 |
efrain |
21 |
|
|
|
22 |
.spinner-border {
|
| 1441 |
ariadna |
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
|
|
|
31 |
|
|
|
32 |
border: var(--#{$prefix}spinner-border-width) solid currentcolor;
|
| 1 |
efrain |
33 |
border-right-color: transparent;
|
|
|
34 |
}
|
|
|
35 |
|
|
|
36 |
.spinner-border-sm {
|
| 1441 |
ariadna |
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
|
| 1 |
efrain |
42 |
}
|
|
|
43 |
|
|
|
44 |
//
|
|
|
45 |
// Growing circle
|
|
|
46 |
//
|
|
|
47 |
|
| 1441 |
ariadna |
48 |
// scss-docs-start spinner-grow-keyframes
|
| 1 |
efrain |
49 |
@keyframes spinner-grow {
|
|
|
50 |
0% {
|
|
|
51 |
transform: scale(0);
|
|
|
52 |
}
|
|
|
53 |
50% {
|
|
|
54 |
opacity: 1;
|
|
|
55 |
transform: none;
|
|
|
56 |
}
|
|
|
57 |
}
|
| 1441 |
ariadna |
58 |
// scss-docs-end spinner-grow-keyframes
|
| 1 |
efrain |
59 |
|
|
|
60 |
.spinner-grow {
|
| 1441 |
ariadna |
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
|
|
|
68 |
|
| 1 |
efrain |
69 |
background-color: currentcolor;
|
|
|
70 |
opacity: 0;
|
|
|
71 |
}
|
|
|
72 |
|
|
|
73 |
.spinner-grow-sm {
|
| 1441 |
ariadna |
74 |
--#{$prefix}spinner-width: #{$spinner-width-sm};
|
|
|
75 |
--#{$prefix}spinner-height: #{$spinner-height-sm};
|
| 1 |
efrain |
76 |
}
|
|
|
77 |
|
| 1441 |
ariadna |
78 |
@if $enable-reduced-motion {
|
| 1 |
efrain |
79 |
@media (prefers-reduced-motion: reduce) {
|
|
|
80 |
.spinner-border,
|
|
|
81 |
.spinner-grow {
|
| 1441 |
ariadna |
82 |
--#{$prefix}spinner-animation-speed: #{$spinner-animation-speed * 2};
|
| 1 |
efrain |
83 |
}
|
|
|
84 |
}
|
|
|
85 |
}
|