pixies

1@use "colors" as *
2
3.lds-ellipsis
4  display: inline-block
5  position: relative
6  width: 80px
7  height: 80px
8
9.lds-ellipsis div
10  position: absolute
11  top: 33px
12  width: 13px
13  height: 13px
14  border-radius: 50%
15  background: $white
16  animation-timing-function: cubic-bezier(0, 1, 1, 0)
17
18.lds-ellipsis div:nth-child(1)
19  left: 8px
20  animation: lds-ellipsis1 0.6s infinite
21
22.lds-ellipsis div:nth-child(2)
23  left: 8px
24  animation: lds-ellipsis2 0.6s infinite
25
26.lds-ellipsis div:nth-child(3)
27  left: 32px
28  animation: lds-ellipsis2 0.6s infinite
29
30.lds-ellipsis div:nth-child(4)
31  left: 56px
32  animation: lds-ellipsis3 0.6s infinite
33
34@keyframes lds-ellipsis1
35  0%
36    transform: scale(0)
37  100%
38    transform: scale(1)
39
40@keyframes lds-ellipsis3
41  0%
42    transform: scale(1)
43  100%
44    transform: scale(0)
45
46
47@keyframes lds-ellipsis2
48  0%
49    transform: translate(0, 0)
50  100%
51    transform: translate(24px, 0)