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