Skip to content

Commit 775e1fa

Browse files
zbryiktzbryikt
committed
pack output html files
1 parent 78e3f5b commit 775e1fa

File tree

13 files changed

+650
-0
lines changed

13 files changed

+650
-0
lines changed

‎dist/circle.html‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<style type="text/css">
2+
.lds-circle {
3+
display: inline-block;
4+
width: 64px;
5+
height: 64px;
6+
margin: 8px;
7+
border-radius: 50%;
8+
background: #fff;
9+
animation: lds-circle 2.4s cubic-bezier(0, 0.2, 0.8, 1) infinite;
10+
}
11+
@keyframes lds-circle {
12+
0%, 100% {
13+
animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5);
14+
}
15+
0% {
16+
transform: rotateY(0deg);
17+
}
18+
50% {
19+
transform: rotateY(1800deg);
20+
animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1);
21+
}
22+
100% {
23+
transform: rotateY(3600deg);
24+
}
25+
}
26+
27+
</style>
28+
<div class="lds-circle"></div>

‎dist/default.html‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
<style type="text/css">
2+
.lds-default {
3+
display: inline-block;
4+
position: relative;
5+
width: 80px;
6+
height: 80px;
7+
}
8+
.lds-default div {
9+
position: absolute;
10+
width: 6px;
11+
height: 6px;
12+
background: #fff;
13+
border-radius: 50%;
14+
animation: lds-default 1.2s linear infinite;
15+
}
16+
.lds-default div:nth-child(1) {
17+
animation-delay: 0s;
18+
top: 37px;
19+
left: 66px;
20+
}
21+
.lds-default div:nth-child(2) {
22+
animation-delay: -0.1s;
23+
top: 22px;
24+
left: 62px;
25+
}
26+
.lds-default div:nth-child(3) {
27+
animation-delay: -0.2s;
28+
top: 11px;
29+
left: 52px;
30+
}
31+
.lds-default div:nth-child(4) {
32+
animation-delay: -0.3s;
33+
top: 7px;
34+
left: 37px;
35+
}
36+
.lds-default div:nth-child(5) {
37+
animation-delay: -0.4s;
38+
top: 11px;
39+
left: 22px;
40+
}
41+
.lds-default div:nth-child(6) {
42+
animation-delay: -0.5s;
43+
top: 22px;
44+
left: 11px;
45+
}
46+
.lds-default div:nth-child(7) {
47+
animation-delay: -0.6s;
48+
top: 37px;
49+
left: 7px;
50+
}
51+
.lds-default div:nth-child(8) {
52+
animation-delay: -0.7s;
53+
top: 52px;
54+
left: 11px;
55+
}
56+
.lds-default div:nth-child(9) {
57+
animation-delay: -0.8s;
58+
top: 62px;
59+
left: 22px;
60+
}
61+
.lds-default div:nth-child(10) {
62+
animation-delay: -0.9s;
63+
top: 66px;
64+
left: 37px;
65+
}
66+
.lds-default div:nth-child(11) {
67+
animation-delay: -1s;
68+
top: 62px;
69+
left: 52px;
70+
}
71+
.lds-default div:nth-child(12) {
72+
animation-delay: -1.1s;
73+
top: 52px;
74+
left: 62px;
75+
}
76+
@keyframes lds-default {
77+
0%, 20%, 80%, 100% {
78+
transform: scale(1);
79+
}
80+
50% {
81+
transform: scale(1.5);
82+
}
83+
}
84+
85+
</style>
86+
<div class="lds-default"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>

‎dist/dist.zip‎

5.97 KB
Binary file not shown.

‎dist/dual-ring.html‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<style type="text/css">
2+
.lds-dual-ring {
3+
display: inline-block;
4+
width: 80px;
5+
height: 80px;
6+
}
7+
.lds-dual-ring:after {
8+
content: " ";
9+
display: block;
10+
width: 64px;
11+
height: 64px;
12+
margin: 8px;
13+
border-radius: 50%;
14+
border: 6px solid #fff;
15+
border-color: #fff transparent #fff transparent;
16+
animation: lds-dual-ring 1.2s linear infinite;
17+
}
18+
@keyframes lds-dual-ring {
19+
0% {
20+
transform: rotate(0deg);
21+
}
22+
100% {
23+
transform: rotate(360deg);
24+
}
25+
}
26+
27+
</style>
28+
<div class="lds-dual-ring"></div>

‎dist/ellipsis.html‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<style type="text/css">
2+
.lds-ellipsis {
3+
display: inline-block;
4+
position: relative;
5+
width: 80px;
6+
height: 80px;
7+
}
8+
.lds-ellipsis div {
9+
position: absolute;
10+
top: 33px;
11+
width: 13px;
12+
height: 13px;
13+
border-radius: 50%;
14+
background: #fff;
15+
animation-timing-function: cubic-bezier(0, 1, 1, 0);
16+
}
17+
.lds-ellipsis div:nth-child(1) {
18+
left: 8px;
19+
animation: lds-ellipsis1 0.6s infinite;
20+
}
21+
.lds-ellipsis div:nth-child(2) {
22+
left: 8px;
23+
animation: lds-ellipsis2 0.6s infinite;
24+
}
25+
.lds-ellipsis div:nth-child(3) {
26+
left: 32px;
27+
animation: lds-ellipsis2 0.6s infinite;
28+
}
29+
.lds-ellipsis div:nth-child(4) {
30+
left: 56px;
31+
animation: lds-ellipsis3 0.6s infinite;
32+
}
33+
@keyframes lds-ellipsis1 {
34+
0% {
35+
transform: scale(0);
36+
}
37+
100% {
38+
transform: scale(1);
39+
}
40+
}
41+
@keyframes lds-ellipsis3 {
42+
0% {
43+
transform: scale(1);
44+
}
45+
100% {
46+
transform: scale(0);
47+
}
48+
}
49+
@keyframes lds-ellipsis2 {
50+
0% {
51+
transform: translate(0, 0);
52+
}
53+
100% {
54+
transform: translate(24px, 0);
55+
}
56+
}
57+
58+
</style>
59+
<div class="lds-ellipsis"><div></div><div></div><div></div><div></div></div>

‎dist/facebook.html‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<style type="text/css">
2+
.lds-facebook {
3+
display: inline-block;
4+
position: relative;
5+
width: 80px;
6+
height: 80px;
7+
}
8+
.lds-facebook div {
9+
display: inline-block;
10+
position: absolute;
11+
left: 8px;
12+
width: 16px;
13+
background: #fff;
14+
animation: lds-facebook 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
15+
}
16+
.lds-facebook div:nth-child(1) {
17+
left: 8px;
18+
animation-delay: -0.24s;
19+
}
20+
.lds-facebook div:nth-child(2) {
21+
left: 32px;
22+
animation-delay: -0.12s;
23+
}
24+
.lds-facebook div:nth-child(3) {
25+
left: 56px;
26+
animation-delay: 0;
27+
}
28+
@keyframes lds-facebook {
29+
0% {
30+
top: 8px;
31+
height: 64px;
32+
}
33+
50%, 100% {
34+
top: 24px;
35+
height: 32px;
36+
}
37+
}
38+
39+
</style>
40+
<div class="lds-facebook"><div></div><div></div><div></div></div>

‎dist/grid.html‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
<style type="text/css">
2+
.lds-grid {
3+
display: inline-block;
4+
position: relative;
5+
width: 80px;
6+
height: 80px;
7+
}
8+
.lds-grid div {
9+
position: absolute;
10+
width: 16px;
11+
height: 16px;
12+
border-radius: 50%;
13+
background: #fff;
14+
animation: lds-grid 1.2s linear infinite;
15+
}
16+
.lds-grid div:nth-child(1) {
17+
top: 8px;
18+
left: 8px;
19+
animation-delay: 0s;
20+
}
21+
.lds-grid div:nth-child(2) {
22+
top: 8px;
23+
left: 32px;
24+
animation-delay: -0.4s;
25+
}
26+
.lds-grid div:nth-child(3) {
27+
top: 8px;
28+
left: 56px;
29+
animation-delay: -0.8s;
30+
}
31+
.lds-grid div:nth-child(4) {
32+
top: 32px;
33+
left: 8px;
34+
animation-delay: -0.4s;
35+
}
36+
.lds-grid div:nth-child(5) {
37+
top: 32px;
38+
left: 32px;
39+
animation-delay: -0.8s;
40+
}
41+
.lds-grid div:nth-child(6) {
42+
top: 32px;
43+
left: 56px;
44+
animation-delay: -1.2s;
45+
}
46+
.lds-grid div:nth-child(7) {
47+
top: 56px;
48+
left: 8px;
49+
animation-delay: -0.8s;
50+
}
51+
.lds-grid div:nth-child(8) {
52+
top: 56px;
53+
left: 32px;
54+
animation-delay: -1.2s;
55+
}
56+
.lds-grid div:nth-child(9) {
57+
top: 56px;
58+
left: 56px;
59+
animation-delay: -1.6s;
60+
}
61+
@keyframes lds-grid {
62+
0%, 100% {
63+
opacity: 1;
64+
}
65+
50% {
66+
opacity: 0.5;
67+
}
68+
}
69+
70+
</style>
71+
<div class="lds-grid"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>

‎dist/heart.html‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<style type="text/css">
2+
.lds-heart {
3+
display: inline-block;
4+
position: relative;
5+
width: 80px;
6+
height: 80px;
7+
transform: rotate(45deg);
8+
transform-origin: 40px 40px;
9+
}
10+
.lds-heart div {
11+
top: 32px;
12+
left: 32px;
13+
position: absolute;
14+
width: 32px;
15+
height: 32px;
16+
background: #fff;
17+
animation: lds-heart 1.2s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
18+
}
19+
.lds-heart div:after,
20+
.lds-heart div:before {
21+
content: " ";
22+
position: absolute;
23+
display: block;
24+
width: 32px;
25+
height: 32px;
26+
background: #fff;
27+
}
28+
.lds-heart div:before {
29+
left: -24px;
30+
border-radius: 50% 0 0 50%;
31+
}
32+
.lds-heart div:after {
33+
top: -24px;
34+
border-radius: 50% 50% 0 0;
35+
}
36+
@keyframes lds-heart {
37+
0% {
38+
transform: scale(0.95);
39+
}
40+
5% {
41+
transform: scale(1.1);
42+
}
43+
39% {
44+
transform: scale(0.85);
45+
}
46+
45% {
47+
transform: scale(1);
48+
}
49+
60% {
50+
transform: scale(0.95);
51+
}
52+
100% {
53+
transform: scale(0.9);
54+
}
55+
}
56+
57+
</style>
58+
<div class="lds-heart"><div></div></div>

0 commit comments

Comments
 (0)