Skip to content

Commit 100d88d

Browse files
zbryiktzbryikt
committed
add swim, slot and leaf animations
1 parent 704b6f7 commit 100d88d

11 files changed

Lines changed: 3763 additions & 1132 deletions

File tree

‎dist/loading.css‎

Lines changed: 3051 additions & 1131 deletions
Large diffs are not rendered by default.

‎dist/loading.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/loading/entries/leaf-px.styl‎

Lines changed: 168 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,168 @@
1+
@import '../../vars.styl'
2+
@import '../../basic.styl'
3+
4+
angle = -30deg
5+
dx = 25px
6+
dy = 50px
7+
8+
+keyframes(ld-leaf)
9+
0%
10+
transform: translate(-0.49 * dx,-0.7857142857142857 * dy) rotate(0.01 * angle)
11+
1%
12+
transform: translate(-0.48 * dx,-0.7514285714285714 * dy) rotate(0.02 * angle)
13+
2%
14+
transform: translate(-0.46 * dx,-0.6885714285714286 * dy) rotate(0.04 * angle)
15+
2%
16+
transform: translate(-0.45 * dx,-0.6742857142857143 * dy) rotate(0.05 * angle)
17+
5%
18+
transform: translate(-0.24 * dx,-0.5857142857142856 * dy) rotate(0.26 * angle)
19+
7%
20+
transform: translate(0.18000000000000005 * dx,-0.5342857142857143 * dy) rotate(0.68 * angle)
21+
10%
22+
transform: translate(0.43000000000000005 * dx,-0.5114285714285715 * dy) rotate(0.93 * angle)
23+
12%
24+
transform: translate(0.48 * dx,-0.5028571428571429 * dy) rotate(0.98 * angle)
25+
13%
26+
transform: translate(0.49 * dx,-0.5 * dy) rotate(0.99 * angle)
27+
14%
28+
transform: translate(0.5 * dx,-0.5 * dy) rotate(1 * angle)
29+
14%
30+
transform: translate(0.5 * dx,-0.5 * dy) rotate(1 * angle)
31+
14%
32+
transform: translate(0.49 * dx,-0.5 * dy) rotate(-0.01 * angle)
33+
15%
34+
transform: translate(0.48 * dx,-0.46571428571428575 * dy) rotate(-0.02 * angle)
35+
16%
36+
transform: translate(0.45999999999999996 * dx,-0.40285714285714286 * dy) rotate(-0.04 * angle)
37+
16%
38+
transform: translate(0.44999999999999996 * dx,-0.38857142857142857 * dy) rotate(-0.05 * angle)
39+
19%
40+
transform: translate(0.24 * dx,-0.3 * dy) rotate(-0.26 * angle)
41+
21%
42+
transform: translate(-0.18000000000000005 * dx,-0.24857142857142855 * dy) rotate(-0.68 * angle)
43+
24%
44+
transform: translate(-0.43000000000000005 * dx,-0.22571428571428576 * dy) rotate(-0.93 * angle)
45+
26%
46+
transform: translate(-0.48 * dx,-0.2171428571428572 * dy) rotate(-0.98 * angle)
47+
27%
48+
transform: translate(-0.49 * dx,-0.2142857142857143 * dy) rotate(-0.99 * angle)
49+
28%
50+
transform: translate(-0.5 * dx,-0.2142857142857143 * dy) rotate(-1 * angle)
51+
29%
52+
transform: translate(-0.5 * dx,-0.2142857142857143 * dy) rotate(-1 * angle)
53+
29%
54+
transform: translate(-0.49 * dx,-0.2142857142857143 * dy) rotate(0.01 * angle)
55+
29%
56+
transform: translate(-0.48 * dx,-0.18000000000000005 * dy) rotate(0.02 * angle)
57+
30%
58+
transform: translate(-0.46 * dx,-0.1171428571428571 * dy) rotate(0.04 * angle)
59+
31%
60+
transform: translate(-0.45 * dx,-0.10285714285714287 * dy) rotate(0.05 * angle)
61+
33%
62+
transform: translate(-0.24 * dx,-0.014285714285714346 * dy) rotate(0.26 * angle)
63+
36%
64+
transform: translate(0.18000000000000005 * dx,0.03714285714285703 * dy) rotate(0.68 * angle)
65+
38%
66+
transform: translate(0.43000000000000005 * dx,0.05999999999999994 * dy) rotate(0.93 * angle)
67+
40%
68+
transform: translate(0.48 * dx,0.06857142857142862 * dy) rotate(0.98 * angle)
69+
41%
70+
transform: translate(0.49 * dx,0.0714285714285714 * dy) rotate(0.99 * angle)
71+
42%
72+
transform: translate(0.5 * dx,0.0714285714285714 * dy) rotate(1 * angle)
73+
43%
74+
transform: translate(0.5 * dx,0.0714285714285714 * dy) rotate(1 * angle)
75+
43%
76+
transform: translate(0.49 * dx,0.0714285714285714 * dy) rotate(-0.01 * angle)
77+
43%
78+
transform: translate(0.48 * dx,0.10571428571428565 * dy) rotate(-0.02 * angle)
79+
45%
80+
transform: translate(0.45999999999999996 * dx,0.16857142857142848 * dy) rotate(-0.04 * angle)
81+
45%
82+
transform: translate(0.44999999999999996 * dx,0.18285714285714283 * dy) rotate(-0.05 * angle)
83+
48%
84+
transform: translate(0.24 * dx,0.27142857142857146 * dy) rotate(-0.26 * angle)
85+
50%
86+
transform: translate(-0.18000000000000005 * dx,0.32285714285714284 * dy) rotate(-0.68 * angle)
87+
52%
88+
transform: translate(-0.43000000000000005 * dx,0.34571428571428553 * dy) rotate(-0.93 * angle)
89+
54%
90+
transform: translate(-0.48 * dx,0.3542857142857142 * dy) rotate(-0.98 * angle)
91+
56%
92+
transform: translate(-0.49 * dx,0.3571428571428571 * dy) rotate(-0.99 * angle)
93+
57%
94+
transform: translate(-0.5 * dx,0.3571428571428571 * dy) rotate(-1 * angle)
95+
57%
96+
transform: translate(-0.5 * dx,0.3571428571428571 * dy) rotate(-1 * angle)
97+
57%
98+
transform: translate(-0.49 * dx,0.3571428571428571 * dy) rotate(0.01 * angle)
99+
58%
100+
transform: translate(-0.48 * dx,0.39142857142857135 * dy) rotate(0.02 * angle)
101+
59%
102+
transform: translate(-0.46 * dx,0.4542857142857143 * dy) rotate(0.04 * angle)
103+
59%
104+
transform: translate(-0.45 * dx,0.4685714285714285 * dy) rotate(0.05 * angle)
105+
62%
106+
transform: translate(-0.24 * dx,0.557142857142857 * dy) rotate(0.26 * angle)
107+
64%
108+
transform: translate(0.18000000000000005 * dx,0.6085714285714284 * dy) rotate(0.68 * angle)
109+
67%
110+
transform: translate(0.43000000000000005 * dx,0.6314285714285713 * dy) rotate(0.93 * angle)
111+
69%
112+
transform: translate(0.48 * dx,0.64 * dy) rotate(0.98 * angle)
113+
70%
114+
transform: translate(0.49 * dx,0.6428571428571427 * dy) rotate(0.99 * angle)
115+
71%
116+
transform: translate(0.5 * dx,0.6428571428571427 * dy) rotate(1 * angle)
117+
71%
118+
transform: translate(0.5 * dx,0.6428571428571427 * dy) rotate(1 * angle)
119+
71%
120+
transform: translate(0.49 * dx,0.6428571428571427 * dy) rotate(-0.01 * angle)
121+
72%
122+
transform: translate(0.48 * dx,0.6771428571428569 * dy) rotate(-0.02 * angle)
123+
73%
124+
transform: translate(0.45999999999999996 * dx,0.7399999999999999 * dy) rotate(-0.04 * angle)
125+
74%
126+
transform: translate(0.44999999999999996 * dx,0.7542857142857141 * dy) rotate(-0.05 * angle)
127+
76%
128+
transform: translate(0.24 * dx,0.8428571428571426 * dy) rotate(-0.26 * angle)
129+
79%
130+
transform: translate(-0.18000000000000005 * dx,0.894285714285714 * dy) rotate(-0.68 * angle)
131+
81%
132+
transform: translate(-0.43000000000000005 * dx,0.9171428571428569 * dy) rotate(-0.93 * angle)
133+
83%
134+
transform: translate(-0.48 * dx,0.9257142857142856 * dy) rotate(-0.98 * angle)
135+
84%
136+
transform: translate(-0.49 * dx,0.9285714285714283 * dy) rotate(-0.99 * angle)
137+
85%
138+
transform: translate(-0.5 * dx,0.9285714285714283 * dy) rotate(-1 * angle)
139+
86%
140+
transform: translate(-0.5 * dx,0.9285714285714283 * dy) rotate(-1 * angle)
141+
86%
142+
transform: translate(-0.49 * dx,0.9285714285714285 * dy) rotate(0.01 * angle)
143+
86%
144+
transform: translate(-0.48 * dx,0.9628571428571427 * dy) rotate(0.02 * angle)
145+
88%
146+
transform: translate(-0.46 * dx,1.0257142857142858 * dy) rotate(0.04 * angle)
147+
88%
148+
transform: translate(-0.45 * dx,1.04 * dy) rotate(0.05 * angle)
149+
90%
150+
transform: translate(-0.24 * dx,1.1285714285714286 * dy) rotate(0.26 * angle)
151+
93%
152+
transform: translate(0.18000000000000005 * dx,1.1799999999999997 * dy) rotate(0.68 * angle)
153+
95%
154+
transform: translate(0.43000000000000005 * dx,1.2028571428571428 * dy) rotate(0.93 * angle)
155+
97%
156+
transform: translate(0.48 * dx,1.2114285714285713 * dy) rotate(0.98 * angle)
157+
99%
158+
transform: translate(0.49 * dx,1.2142857142857144 * dy) rotate(0.99 * angle)
159+
99%
160+
transform: translate(0.5 * dx,1.2142857142857144 * dy) rotate(1 * angle)
161+
100%
162+
transform: translate(0.5 * dx,1.2142857142857144 * dy) rotate(1 * angle)
163+
164+
165+
166+
167+
.ld.ld-leaf
168+
animation(ld-leaf 4s infinite cubic-bezier(0.1,0.5,0.1,0.5))

‎src/loading/entries/leaf.styl‎

Lines changed: 168 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,168 @@
1+
@import '../../vars.styl'
2+
@import '../../basic.styl'
3+
4+
angle = -30deg
5+
dx = 50%
6+
dy = 150%
7+
8+
+keyframes(ld-leaf)
9+
0%
10+
transform: translate(-0.49 * dx,-0.7857142857142857 * dy) rotate(0.01 * angle)
11+
1%
12+
transform: translate(-0.48 * dx,-0.7514285714285714 * dy) rotate(0.02 * angle)
13+
2%
14+
transform: translate(-0.46 * dx,-0.6885714285714286 * dy) rotate(0.04 * angle)
15+
2%
16+
transform: translate(-0.45 * dx,-0.6742857142857143 * dy) rotate(0.05 * angle)
17+
5%
18+
transform: translate(-0.24 * dx,-0.5857142857142856 * dy) rotate(0.26 * angle)
19+
7%
20+
transform: translate(0.18000000000000005 * dx,-0.5342857142857143 * dy) rotate(0.68 * angle)
21+
10%
22+
transform: translate(0.43000000000000005 * dx,-0.5114285714285715 * dy) rotate(0.93 * angle)
23+
12%
24+
transform: translate(0.48 * dx,-0.5028571428571429 * dy) rotate(0.98 * angle)
25+
13%
26+
transform: translate(0.49 * dx,-0.5 * dy) rotate(0.99 * angle)
27+
14%
28+
transform: translate(0.5 * dx,-0.5 * dy) rotate(1 * angle)
29+
14%
30+
transform: translate(0.5 * dx,-0.5 * dy) rotate(1 * angle)
31+
14%
32+
transform: translate(0.49 * dx,-0.5 * dy) rotate(-0.01 * angle)
33+
15%
34+
transform: translate(0.48 * dx,-0.46571428571428575 * dy) rotate(-0.02 * angle)
35+
16%
36+
transform: translate(0.45999999999999996 * dx,-0.40285714285714286 * dy) rotate(-0.04 * angle)
37+
16%
38+
transform: translate(0.44999999999999996 * dx,-0.38857142857142857 * dy) rotate(-0.05 * angle)
39+
19%
40+
transform: translate(0.24 * dx,-0.3 * dy) rotate(-0.26 * angle)
41+
21%
42+
transform: translate(-0.18000000000000005 * dx,-0.24857142857142855 * dy) rotate(-0.68 * angle)
43+
24%
44+
transform: translate(-0.43000000000000005 * dx,-0.22571428571428576 * dy) rotate(-0.93 * angle)
45+
26%
46+
transform: translate(-0.48 * dx,-0.2171428571428572 * dy) rotate(-0.98 * angle)
47+
27%
48+
transform: translate(-0.49 * dx,-0.2142857142857143 * dy) rotate(-0.99 * angle)
49+
28%
50+
transform: translate(-0.5 * dx,-0.2142857142857143 * dy) rotate(-1 * angle)
51+
29%
52+
transform: translate(-0.5 * dx,-0.2142857142857143 * dy) rotate(-1 * angle)
53+
29%
54+
transform: translate(-0.49 * dx,-0.2142857142857143 * dy) rotate(0.01 * angle)
55+
29%
56+
transform: translate(-0.48 * dx,-0.18000000000000005 * dy) rotate(0.02 * angle)
57+
30%
58+
transform: translate(-0.46 * dx,-0.1171428571428571 * dy) rotate(0.04 * angle)
59+
31%
60+
transform: translate(-0.45 * dx,-0.10285714285714287 * dy) rotate(0.05 * angle)
61+
33%
62+
transform: translate(-0.24 * dx,-0.014285714285714346 * dy) rotate(0.26 * angle)
63+
36%
64+
transform: translate(0.18000000000000005 * dx,0.03714285714285703 * dy) rotate(0.68 * angle)
65+
38%
66+
transform: translate(0.43000000000000005 * dx,0.05999999999999994 * dy) rotate(0.93 * angle)
67+
40%
68+
transform: translate(0.48 * dx,0.06857142857142862 * dy) rotate(0.98 * angle)
69+
41%
70+
transform: translate(0.49 * dx,0.0714285714285714 * dy) rotate(0.99 * angle)
71+
42%
72+
transform: translate(0.5 * dx,0.0714285714285714 * dy) rotate(1 * angle)
73+
43%
74+
transform: translate(0.5 * dx,0.0714285714285714 * dy) rotate(1 * angle)
75+
43%
76+
transform: translate(0.49 * dx,0.0714285714285714 * dy) rotate(-0.01 * angle)
77+
43%
78+
transform: translate(0.48 * dx,0.10571428571428565 * dy) rotate(-0.02 * angle)
79+
45%
80+
transform: translate(0.45999999999999996 * dx,0.16857142857142848 * dy) rotate(-0.04 * angle)
81+
45%
82+
transform: translate(0.44999999999999996 * dx,0.18285714285714283 * dy) rotate(-0.05 * angle)
83+
48%
84+
transform: translate(0.24 * dx,0.27142857142857146 * dy) rotate(-0.26 * angle)
85+
50%
86+
transform: translate(-0.18000000000000005 * dx,0.32285714285714284 * dy) rotate(-0.68 * angle)
87+
52%
88+
transform: translate(-0.43000000000000005 * dx,0.34571428571428553 * dy) rotate(-0.93 * angle)
89+
54%
90+
transform: translate(-0.48 * dx,0.3542857142857142 * dy) rotate(-0.98 * angle)
91+
56%
92+
transform: translate(-0.49 * dx,0.3571428571428571 * dy) rotate(-0.99 * angle)
93+
57%
94+
transform: translate(-0.5 * dx,0.3571428571428571 * dy) rotate(-1 * angle)
95+
57%
96+
transform: translate(-0.5 * dx,0.3571428571428571 * dy) rotate(-1 * angle)
97+
57%
98+
transform: translate(-0.49 * dx,0.3571428571428571 * dy) rotate(0.01 * angle)
99+
58%
100+
transform: translate(-0.48 * dx,0.39142857142857135 * dy) rotate(0.02 * angle)
101+
59%
102+
transform: translate(-0.46 * dx,0.4542857142857143 * dy) rotate(0.04 * angle)
103+
59%
104+
transform: translate(-0.45 * dx,0.4685714285714285 * dy) rotate(0.05 * angle)
105+
62%
106+
transform: translate(-0.24 * dx,0.557142857142857 * dy) rotate(0.26 * angle)
107+
64%
108+
transform: translate(0.18000000000000005 * dx,0.6085714285714284 * dy) rotate(0.68 * angle)
109+
67%
110+
transform: translate(0.43000000000000005 * dx,0.6314285714285713 * dy) rotate(0.93 * angle)
111+
69%
112+
transform: translate(0.48 * dx,0.64 * dy) rotate(0.98 * angle)
113+
70%
114+
transform: translate(0.49 * dx,0.6428571428571427 * dy) rotate(0.99 * angle)
115+
71%
116+
transform: translate(0.5 * dx,0.6428571428571427 * dy) rotate(1 * angle)
117+
71%
118+
transform: translate(0.5 * dx,0.6428571428571427 * dy) rotate(1 * angle)
119+
71%
120+
transform: translate(0.49 * dx,0.6428571428571427 * dy) rotate(-0.01 * angle)
121+
72%
122+
transform: translate(0.48 * dx,0.6771428571428569 * dy) rotate(-0.02 * angle)
123+
73%
124+
transform: translate(0.45999999999999996 * dx,0.7399999999999999 * dy) rotate(-0.04 * angle)
125+
74%
126+
transform: translate(0.44999999999999996 * dx,0.7542857142857141 * dy) rotate(-0.05 * angle)
127+
76%
128+
transform: translate(0.24 * dx,0.8428571428571426 * dy) rotate(-0.26 * angle)
129+
79%
130+
transform: translate(-0.18000000000000005 * dx,0.894285714285714 * dy) rotate(-0.68 * angle)
131+
81%
132+
transform: translate(-0.43000000000000005 * dx,0.9171428571428569 * dy) rotate(-0.93 * angle)
133+
83%
134+
transform: translate(-0.48 * dx,0.9257142857142856 * dy) rotate(-0.98 * angle)
135+
84%
136+
transform: translate(-0.49 * dx,0.9285714285714283 * dy) rotate(-0.99 * angle)
137+
85%
138+
transform: translate(-0.5 * dx,0.9285714285714283 * dy) rotate(-1 * angle)
139+
86%
140+
transform: translate(-0.5 * dx,0.9285714285714283 * dy) rotate(-1 * angle)
141+
86%
142+
transform: translate(-0.49 * dx,0.9285714285714285 * dy) rotate(0.01 * angle)
143+
86%
144+
transform: translate(-0.48 * dx,0.9628571428571427 * dy) rotate(0.02 * angle)
145+
88%
146+
transform: translate(-0.46 * dx,1.0257142857142858 * dy) rotate(0.04 * angle)
147+
88%
148+
transform: translate(-0.45 * dx,1.04 * dy) rotate(0.05 * angle)
149+
90%
150+
transform: translate(-0.24 * dx,1.1285714285714286 * dy) rotate(0.26 * angle)
151+
93%
152+
transform: translate(0.18000000000000005 * dx,1.1799999999999997 * dy) rotate(0.68 * angle)
153+
95%
154+
transform: translate(0.43000000000000005 * dx,1.2028571428571428 * dy) rotate(0.93 * angle)
155+
97%
156+
transform: translate(0.48 * dx,1.2114285714285713 * dy) rotate(0.98 * angle)
157+
99%
158+
transform: translate(0.49 * dx,1.2142857142857144 * dy) rotate(0.99 * angle)
159+
99%
160+
transform: translate(0.5 * dx,1.2142857142857144 * dy) rotate(1 * angle)
161+
100%
162+
transform: translate(0.5 * dx,1.2142857142857144 * dy) rotate(1 * angle)
163+
164+
165+
166+
167+
.ld.ld-leaf
168+
animation(ld-leaf 4s infinite cubic-bezier(0.1,0.5,0.1,0.5))

0 commit comments

Comments
 (0)