Loader by ZacharyCrespin

1@keyframes square-animation {
2 0% {
3  left: 0;
4  top: 0;
5 }
6
7 10.5% {
8  left: 0;
9  top: 0;
10 }
11
12 12.5% {
13  left: 32px;
14  top: 0;
15 }
16
17 23% {
18  left: 32px;
19  top: 0;
20 }
21
22 25% {
23  left: 64px;
24  top: 0;
25 }
26
27 35.5% {
28  left: 64px;
29  top: 0;
30 }
31
32 37.5% {
33  left: 64px;
34  top: 32px;
35 }
36
37 48% {
38  left: 64px;
39  top: 32px;
40 }
41
42 50% {
43  left: 32px;
44  top: 32px;
45 }
46
47 60.5% {
48  left: 32px;
49  top: 32px;
50 }
51
52 62.5% {
53  left: 32px;
54  top: 64px;
55 }
56
57 73% {
58  left: 32px;
59  top: 64px;
60 }
61
62 75% {
63  left: 0;
64  top: 64px;
65 }
66
67 85.5% {
68  left: 0;
69  top: 64px;
70 }
71
72 87.5% {
73  left: 0;
74  top: 32px;
75 }
76
77 98% {
78  left: 0;
79  top: 32px;
80 }
81
82 100% {
83  left: 0;
84  top: 0;
85 }
86}
87
88.loader {
89 position: relative;
90 width: 96px;
91 height: 96px;
92 transform: rotate(45deg);
93}
94
95.loader-square {
96 position: absolute;
97 top: 0;
98 left: 0;
99 width: 28px;
100 height: 28px;
101 margin: 2px;
102 border-radius: 0px;
103 background: white;
104 background-size: cover;
105 background-position: center;
106 background-attachment: fixed;
107 animation: square-animation 10s ease-in-out infinite both;
108}
109
110.loader-square:nth-of-type(0) {
111 animation-delay: 0s;
112}
113
114.loader-square:nth-of-type(1) {
115 animation-delay: -1.4285714286s;
116}
117
118.loader-square:nth-of-type(2) {
119 animation-delay: -2.8571428571s;
120}
121
122.loader-square:nth-of-type(3) {
123 animation-delay: -4.2857142857s;
124}
125
126.loader-square:nth-of-type(4) {
127 animation-delay: -5.7142857143s;
128}
129
130.loader-square:nth-of-type(5) {
131 animation-delay: -7.1428571429s;
132}
133
134.loader-square:nth-of-type(6) {
135 animation-delay: -8.5714285714s;
136}
137
138.loader-square:nth-of-type(7) {
139 animation-delay: -10s;
140}