Loader by garerim

1.anim-box {
2  width: 200px;
3  height: 200px;
4  border: 5px solid #333;
5  margin: 100px auto;
6  position: relative;
7}
8
9.anim-interieur {
10  width: 100px;
11  height: 50px;
12  position: absolute;
13  top: 50%;
14  left: 50%;
15  transform: translate(-50%, -50%);
16    /* background-color: orange; */
17  text-align: center;
18}
19
20.rect {
21  background-color: #333;
22  display: inline-block;
23  height: 60px;
24  width: 6px;
25  margin: 0px  1px;
26  animation: etire 1.2s infinite ease-in-out;
27}
28
29@keyframes etire {
30  0% {
31    transform: scaleY(0.4);
32  }
33
34  20% {
35    transform: scaleY(1);
36  }
37
38  40% {
39    transform: scaleY(0.4);
40  }
41
42  100% {
43    transform: scaleY(0.4);
44  }
45}
46
47.rect2 {
48  animation-delay: -1.1s;
49}
50
51.rect3 {
52  animation-delay: -1s;
53}
54
55.rect4 {
56  animation-delay: -0.9s;
57}
58
59.rect5 {
60  animation-delay: -0.8s;
61}