]>
Commit | Line | Data |
---|---|---|
1 | @import '_variables'; | |
2 | @import '_mixins'; | |
3 | ||
4 | // Thanks to https://loading.io/css/ (CC0 License) | |
5 | ||
6 | .lds-ring { | |
7 | display: inline-block; | |
8 | position: relative; | |
9 | width: 50px; | |
10 | height: 50px; | |
11 | } | |
12 | ||
13 | .lds-ring div { | |
14 | box-sizing: border-box; | |
15 | display: block; | |
16 | position: absolute; | |
17 | width: 44px; | |
18 | height: 44px; | |
19 | margin: 6px; | |
20 | border: 4px solid; | |
21 | border-radius: 50%; | |
22 | animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; | |
23 | border-color: #999999 transparent transparent transparent; | |
24 | } | |
25 | ||
26 | .lds-ring div:nth-child(1) { | |
27 | animation-delay: -0.45s; | |
28 | } | |
29 | ||
30 | .lds-ring div:nth-child(2) { | |
31 | animation-delay: -0.3s; | |
32 | } | |
33 | ||
34 | .lds-ring div:nth-child(3) { | |
35 | animation-delay: -0.15s; | |
36 | } | |
37 | ||
38 | @keyframes lds-ring { | |
39 | 0% { | |
40 | transform: rotate(0deg); | |
41 | } | |
42 | 100% { | |
43 | transform: rotate(360deg); | |
44 | } | |
45 | } |