Loader by csozidev

1/* Simple loader made by: csozi | Website: www.csozi.hu*/
2
3.square {
4  display: flex;
5  flex-wrap: wrap;
6  width: 100px;
7  height: 100px;
8  box-sizing: content-box;
9  animation: load-big 4s infinite;
10  transform-origin: 0px 100px;
11}
12
13.mini_square {
14  box-sizing: border-box;
15  height: 50px;
16  width: 50px;
17  background-color: darkcyan;
18}
19
20.sq-1 {
21  animation: load-left-top 4s infinite;
22}
23
24.sq-2 {
25  animation: load-right-top 4s infinite;
26}
27
28.sq-4 {
29  animation: load-right-bottom 4s infinite;
30}
31
32@keyframes load-right-bottom {
33  0% {
34    translate: -50px 0px;
35  }
36
37  25% {
38    translate: 0px 0px;
39  }
40
41  100% {
42    translate: 0px 0px;
43  }
44}
45
46@keyframes load-right-top {
47  0% {
48    translate: -50px 50px;
49  }
50
51  25% {
52    translate: 0px 50px;
53  }
54
55  50% {
56    translate: 0px 0px;
57  }
58
59  100% {
60    translate: 0px 0px;
61  }
62}
63
64@keyframes load-left-top {
65  0% {
66    translate: 0px 50px;
67  }
68
69  25% {
70    translate: 50px 50px;
71  }
72
73  50% {
74    translate: 50px 0px;
75  }
76
77  75% {
78    translate: 0px 0px;
79  }
80
81  100% {
82    translate: 0px 0px;
83  }
84}
85
86@keyframes load-big {
87  0% {
88    scale: 1;
89    background-color: rgba(0, 0, 0, 0);
90  }
91
92  74% {
93    scale: 1;
94    background-color: rgba(0, 0, 0, 0);
95  }
96
97  75% {
98    scale: 1;
99    background-color: darkcyan;
100  }
101
102  100% {
103    scale: 0.5;
104    background-color: darkcyan;
105  }
106}