1.loader {
2  position: relative;
3  width: 92px;
4  height: 180px;
5  border-radius: 8px;
6  transform: translateY(-30px);
7  background-color: #000;
8  background-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 4%,rgba(81,81,81,1) 14%,rgba(44,44,44,1) 26%,rgba(2,2,2,1) 53%,rgba(2,2,2,1) 65%,rgba(2,2,2,0) 66%),
9    linear-gradient(#111, #111);
10  background-repeat: no-repeat;
11  background-size: 10px 10px , 84px 162px;
12  background-position: center 2px, 4px 8px;
13  animation: lightUp 6s linear infinite alternate;
14}
15
16.loader:before {
17  content: '';
18  position: absolute;
19  left: 50%;
20  top: 190px;
21  transform: translateX(-50%);
22  width: 32px;
23  height: 75px;
24  background-image: linear-gradient(#fff, #fff),
25  linear-gradient(#bbb, #bbb),
26  linear-gradient(#fff, #fff);
27  background-repeat: no-repeat;
28  background-position: center 4px , center top, center 5px;
29  background-size: 11px 11px , 7px 4px ,  2px 100%;
30  animation: plugin 6s linear infinite alternate;
31}
32
33.loader:after {
34  content: '';
35  width: 30px;
36  height: 60px;
37  background-image: linear-gradient(#888, #888),
38  linear-gradient(to right, rgba(255,255,255,0.1) 0%,rgba(255,255,255,0.5) 40%,rgba(255,255,255,0.3) 50%,rgba(255,255,255,0.1) 100%),
39  linear-gradient(#15ff00, #15ff00),
40  linear-gradient(#888, #888);
41  background-size: 12px 4px, 30px 52px , 30px 0px , 30px 56px;
42  background-position: center 0 , center 6px , center bottom , center 4px;
43  background-repeat: no-repeat;
44  top: 50%;
45  left: 50%;
46  position: absolute;
47  transform: translate(-50% , -50%);
48  animation: charging 6s linear infinite alternate;
49}
50
51@keyframes charging {
52  0%  , 25% {
53    opacity: 0;
54    background-size: 12px 4px, 30px 52px , 30px 0px , 30px 56px;
55  }
56
57  26% ,  75% {
58    opacity: 1;
59    background-size: 12px 4px, 30px 52px , 30px 0px , 30px 56px;
60  }
61
62  50% , 100% {
63    opacity: 1;
64    background-size: 12px 4px, 30px 52px , 30px 56px , 30px 56px
65  }
66}
67
68@keyframes lightUp {
69  0%  , 25% {
70    background-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 4%,rgba(81,81,81,1) 14%,rgba(44,44,44,1) 26%,rgba(2,2,2,1) 53%,rgba(2,2,2,1) 65%,rgba(2,2,2,0) 66%),
71      linear-gradient(#111, #111);
72  }
73
74  26% , 100% {
75    background-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 4%,rgba(81,81,81,1) 14%,rgba(44,44,44,1) 26%,rgba(2,2,2,1) 53%,rgba(2,2,2,1) 65%,rgba(2,2,2,0) 66%),
76      linear-gradient(#DDD, #DDD);
77  }
78}
79
80@keyframes plugin {
81  0% , 25% {
82    top: 190px;
83    background-position: center 4px , center top, center 5px;
84  }
85
86  26%  , 100% {
87    background-position: center 0 , center top, center 5px;
88    top: 180px;
89  }
90}
91