1.loader {
2  position: relative;
3  border-style: solid;
4  box-sizing: border-box;
5  border-width: 40px 60px 30px 60px;
6  border-color: #3760C9 #96DDFC #96DDFC #36BBF7;
7  animation: envFloating 1s ease-in infinite alternate;
8}
9
10.loader:after {
11  content: "";
12  position: absolute;
13  right: 62px;
14  top: -40px;
15  height: 70px;
16  width: 50px;
17  background-image: linear-gradient(#fff 45px, transparent 0),
18            linear-gradient(#fff 45px, transparent 0),
19            linear-gradient(#fff 45px, transparent 0);
20  background-repeat: no-repeat;
21  background-size: 30px 4px;
22  background-position: 0px 11px , 8px 35px, 0px 60px;
23  animation: envDropping 0.75s linear infinite;
24}
25
26@keyframes envFloating {
27  0% {
28    transform: translate(-2px, -5px)
29  }
30
31  100% {
32    transform: translate(0, 5px)
33  }
34}
35
36@keyframes envDropping {
37  0% {
38    background-position: 100px 11px , 115px 35px, 105px 60px;
39    opacity: 1;
40  }
41
42  50% {
43    background-position: 0px 11px , 20px 35px, 5px 60px;
44  }
45
46  60% {
47    background-position: -30px 11px , 0px 35px, -10px 60px;
48  }
49
50  75%, 100% {
51    background-position: -30px 11px , -30px 35px, -30px 60px;
52    opacity: 0;
53  }
54}
55