1.loader {
2  height: 150px;
3  width: 100px;
4  border-radius: 55px 55px 10px 10px;
5  position: relative;
6  background: #FF3D00;
7  background-image: linear-gradient(0deg,
8    #f63a99 25%,
9    #30dcf6 25%,
10    #30dcf6 25%,
11    #30dcf6 50%,
12    #f2d200 50%,
13    #f2d200 50%,
14    #f2d200 75%,
15    #70ca5c 75%);
16  background-position: 0px 0px;
17  background-size: auto 175px;
18  background-repeat: repeat-y;
19  animation: colorShift 6s linear infinite;
20}
21
22.loader:before {
23  content: '';
24  position: absolute;
25  left: 10px;
26  bottom: 15px;
27  width: 15px;
28  height: 100px;
29  border-radius: 50px;
30  background: rgba(255, 255, 255, 0.5);
31}
32
33.loader:after {
34  content: "";
35  position: absolute;
36  left: 50%;
37  top: 100%;
38  transform: translate(-50% , 0);
39  box-shadow: 0 15px 2px rgba(0, 0, 0, 0.25) inset;
40  width: 32px;
41  height: 45px;
42  background: #E09C5F;
43  border-radius: 0 0 12px 12px;
44}
45
46@keyframes colorShift {
47  to {
48    background-position: 0 175px
49  }
50}
51
52