Loader by Nawsome

1.loader {
2  position: relative;
3  width: 240px;
4  height: 130px;
5  margin-bottom: 10px;
6  border: 1px solid #d3d3d3;
7  padding: 15px;
8  background-color: #e3e3e3;
9  overflow: hidden;
10}
11
12.loader:after {
13  content: "";
14  position: absolute;
15  width: 100%;
16  height: 100%;
17  top: 0;
18  left: 0;
19  background: linear-gradient(110deg, rgba(227, 227, 227, 0) 0%, rgba(227, 227, 227, 0) 40%, rgba(227, 227, 227, 0.5) 50%, rgba(227, 227, 227, 0) 60%, rgba(227, 227, 227, 0) 100%);
20  animation: gradient-animation_2 1.2s linear infinite;
21}
22
23.loader .wrapper {
24  width: 100%;
25  height: 100%;
26  position: relative;
27}
28
29.loader .wrapper > div {
30  background-color: #cacaca;
31}
32
33.loader .circle {
34  width: 50px;
35  height: 50px;
36  border-radius: 50%;
37}
38
39.loader .button {
40  display: inline-block;
41  height: 32px;
42  width: 75px;
43}
44
45.loader .line-1 {
46  position: absolute;
47  top: 11px;
48  left: 58px;
49  height: 10px;
50  width: 100px;
51}
52
53.loader .line-2 {
54  position: absolute;
55  top: 34px;
56  left: 58px;
57  height: 10px;
58  width: 150px;
59}
60
61.loader .line-3 {
62  position: absolute;
63  top: 57px;
64  left: 0px;
65  height: 10px;
66  width: 100%;
67}
68
69.loader .line-4 {
70  position: absolute;
71  top: 80px;
72  left: 0px;
73  height: 10px;
74  width: 92%;
75}
76
77@keyframes gradient-animation_2 {
78  0% {
79    transform: translateX(-100%);
80  }
81
82  100% {
83    transform: translateX(100%);
84  }
85}