Loader by Cebucoder

1.loader {
2  width: 350px;
3  height: 180px;
4  border-radius: 10px;
5  background: #fff;
6  display: flex;
7  flex-direction: column;
8  align-items: center;
9  justify-content: space-evenly;
10  padding: 30px;
11  box-shadow: 2px 2px 10px -5px lightgrey;
12}
13.loading {
14  width: 100%;
15  height: 10px;
16  background: lightgrey;
17  border-radius: 10px;
18  position: relative;
19}
20.loading::after {
21  content: "";
22  position: absolute;
23  top: 0;
24  left: 0;
25  width: 50%;
26  height: 10px;
27  background: #002;
28  border-radius: 10px;
29  z-index: 1;
30  animation: loading 0.6s alternate infinite;
31}
32label {
33  color: #002;
34  font-size: 18px;
35  animation: bit 0.6s alternate infinite;
36}
37
38@keyframes bit {
39  from {
40    opacity: 0.3;
41  }
42  to {
43    opacity: 1;
44  }
45}
46
47@keyframes loading {
48  0% {
49    left: 25%;
50  }
51  100% {
52    left: 50%;
53  }
54  0% {
55    left: 0%;
56  }
57}
58