dev
Line | |
---|
1 | //
|
---|
2 | // Rotating border
|
---|
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 | // stylelint-disable-next-line property-blacklist
|
---|
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 | // Growing circle
|
---|
29 | //
|
---|
30 |
|
---|
31 | @keyframes spinner-grow {
|
---|
32 | 0% {
|
---|
33 | transform: scale(0);
|
---|
34 | }
|
---|
35 | 50% {
|
---|
36 | opacity: 1;
|
---|
37 | }
|
---|
38 | }
|
---|
39 |
|
---|
40 | .spinner-grow {
|
---|
41 | display: inline-block;
|
---|
42 | width: $spinner-width;
|
---|
43 | height: $spinner-height;
|
---|
44 | vertical-align: text-bottom;
|
---|
45 | background-color: currentColor;
|
---|
46 | // stylelint-disable-next-line property-blacklist
|
---|
47 | border-radius: 50%;
|
---|
48 | opacity: 0;
|
---|
49 | animation: spinner-grow .75s linear infinite;
|
---|
50 | }
|
---|
51 |
|
---|
52 | .spinner-grow-sm {
|
---|
53 | width: $spinner-width-sm;
|
---|
54 | height: $spinner-height-sm;
|
---|
55 | }
|
---|
Note:
See
TracBrowser
for help on using the repository browser.