Loader by exyreams

1.cssload-container * {
2  box-sizing: border-box;
3}
4
5.cssload-container {
6  margin: 38px auto 0 auto;
7  max-width: 1048px;
8}
9
10.cssload-container ul li {
11  list-style: none;
12}
13
14.cssload-flex-container {
15  display: flex;
16  display: -o-flex;
17  display: -ms-flex;
18  display: -webkit-flex;
19  display: -moz-flex;
20  flex-direction: row;
21  flex-wrap: wrap;
22  justify-content: space-around;
23}
24
25.cssload-flex-container li {
26  padding: 19px;
27  height: 188px;
28  width: 188px;
29  margin: 56px 38px;
30  position: relative;
31  text-align: center;
32}
33
34.cssload-loading-center {
35  display: inline-block;
36  position: absolute;
37    /* The color can be custmized, This color is for center cube.*/
38  background: #ff0000;
39  height: 56px;
40  width: 56px;
41  left: 68px;
42  top: 69px;
43  transform: rotate(45deg);
44  border-radius: 6px;
45  animation: pulse 1.3s ease infinite;
46}
47
48.cssload-loading {
49  display: inline-block;
50  position: relative;
51  width: 141px;
52  height: 141px;
53  margin-top: 6px;
54  transform: rotate(45deg);
55}
56
57.cssload-loading:after, .cssload-loading:before {
58  position: absolute;
59  content: '';
60  height: 19px;
61  width: 19px;
62  display: block;
63  top: 0;
64    /* The color can be custmized, This color is for 4 cubes.*/
65  background: #ff5252;
66  border-radius: 6px;
67}
68
69.cssload-loading:after {
70  right: 0;
71  animation: square-tr 2.6s ease infinite;
72  animation-delay: .162.5s;
73}
74
75.cssload-loading:before {
76  animation: square-tl 2.6s ease infinite;
77  animation-delay: .162.5s;
78}
79
80.cssload-loading.cssload-two {
81  position: relative;
82  top: -150px;
83}
84
85.cssload-loading.cssload-two:after, .cssload-loading.cssload-two:before {
86  bottom: 0;
87  top: initial;
88}
89
90.cssload-loading.cssload-two:after {
91  animation: square-br 2.6s ease infinite;
92  animation-direction: reverse;
93}
94
95.cssload-loading.cssload-two:before {
96  animation: square-bl 2.6s ease infinite;
97  animation-direction: reverse;
98}
99
100@keyframes square-tl {
101  0% {
102    transform: translate(0, 0);
103  }
104
105  25% {
106    transform: translate(0, 117.5px);
107  }
108
109  50% {
110    transform: translate(117.5px, 117.5px);
111  }
112
113  75% {
114    transform: translate(117.5px, 0);
115  }
116}
117
118@keyframes square-bl {
119  0% {
120    transform: translate(0, 0);
121  }
122
123  25% {
124    transform: translate(0, -117.5px);
125  }
126
127  50% {
128    transform: translate(117.5px, -117.5px);
129  }
130
131  75% {
132    transform: translate(117.5px, 0);
133  }
134}
135
136@keyframes square-tr {
137  0% {
138    transform: translate(0, 0);
139  }
140
141  25% {
142    transform: translate(-117.5px, 0);
143  }
144
145  50% {
146    transform: translate(-117.5px, 117.5px);
147  }
148
149  75% {
150    transform: translate(0, 117.5px);
151  }
152}
153
154@keyframes square-br {
155  0% {
156    transform: translate(0, 0);
157  }
158
159  25% {
160    transform: translate(-117.5px, 0);
161  }
162
163  50% {
164    transform: translate(-117.5px, -117.5px);
165  }
166
167  75% {
168    transform: translate(0, -117.5px);
169  }
170}
171
172@keyframes rotate {
173  from {
174    transform: rotate(0deg);
175  }
176
177  to {
178    transform: rotate(360deg);
179  }
180}
181
182@keyframes pulse {
183  0%, 100% {
184    transform: scale(inherit) rotate(45deg);
185  }
186
187  75% {
188    transform: scale(0.25) rotate(45deg);
189  }
190}