Loader by TemplateVentures

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  overflow: hidden;
20}
21.loading::after {
22  content: "";
23  position: absolute;
24  top: 0;
25  left: 0;
26  width: 50%;
27  height: 10px;
28  background: #002;
29  border-radius: 10px;
30  z-index: 1;
31  animation: loading 0.6s alternate infinite;
32}
33label {
34  color: #002;
35  font-size: 18px;
36  animation: bit 0.6s alternate infinite;
37}
38
39@keyframes bit {
40  from {
41    opacity: 0.3;
42  }
43  to {
44    opacity: 1;
45  }
46}
47
48@keyframes loading {
49  0% {
50    left: -25%;
51  }
52  100% {
53    left: 70%;
54  }
55  0% {
56    left: -25%;
57  }
58}
59