1 |
|
2 |
|
3 |
|
4 |
|
5 | @keyframes spinner-border {
|
6 | to { transform: rotate(360deg); }
|
7 | }
|
8 |
|
9 | .spinner-border {
|
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 |
|
17 | border-radius: 50%;
|
18 | animation: spinner-border .75s linear infinite;
|
19 | }
|
20 |
|
21 | .spinner-border-sm {
|
22 | width: $spinner-width-sm;
|
23 | height: $spinner-height-sm;
|
24 | border-width: $spinner-border-width-sm;
|
25 | }
|
26 |
|
27 |
|
28 |
|
29 |
|
30 |
|
31 | @keyframes spinner-grow {
|
32 | 0% {
|
33 | transform: scale(0);
|
34 | }
|
35 | 50% {
|
36 | opacity: 1;
|
37 | transform: none;
|
38 | }
|
39 | }
|
40 |
|
41 | .spinner-grow {
|
42 | display: inline-block;
|
43 | width: $spinner-width;
|
44 | height: $spinner-height;
|
45 | vertical-align: text-bottom;
|
46 | background-color: currentColor;
|
47 |
|
48 | border-radius: 50%;
|
49 | opacity: 0;
|
50 | animation: spinner-grow .75s linear infinite;
|
51 | }
|
52 |
|
53 | .spinner-grow-sm {
|
54 | width: $spinner-width-sm;
|
55 | height: $spinner-height-sm;
|
56 | }
|