Skip to content

Commit 3e59271

Browse files
zbryiktzbryikt
committed
init commit
0 parents  commit 3e59271

15 files changed

+1116
-0
lines changed

‎README.md

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
CSS-Spinner
2+
================
3+
4+
5+
A collection of small, elegant pure css spinners for website ajax and loading animation. All required HTML and CSS are in a single file for every single spinner, and there is no external dependency. To see what's inside, check out [the live demo on loading.io](https://loading.io/css/)
6+
7+
Average size of css-spinner is 1.5KB after minimized and 0.3KB after zipped.
8+
9+
10+
11+
Browser Compatibility
12+
----------------
13+
14+
css-spinner uses moden CSS3 technologies like CSS Animations, CSS Transformation, which are supported by all modern browsers. To support older browsers like IE9, please use [loading.io](https://loading.io/animation/icon/) to genearte alternative GIF Loaders instead.
15+
16+
17+
18+
License
19+
----------------
20+
21+
All loader files here are released under CC0 License. However, you could attribute to this link: [loading.io css spinner ( https://loading.io/css/ )](https://loading.io/css/) to give loading.io a thumbs-up.

‎circle.html

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

‎default.html

Lines changed: 140 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,140 @@
1+
<div class="lds-css">
2+
<div class="lds-default" style="100%;height:100%"><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>
3+
<style type="text/css">@-webkit-keyframes lds-default {
4+
0% {
5+
width: 16.8px;
6+
height: 16.8px;
7+
background: #ffffff;
8+
}
9+
25% {
10+
width: 16.8px;
11+
height: 16.8px;
12+
background: #ffffff;
13+
}
14+
50% {
15+
width: 28px;
16+
height: 28px;
17+
background: #ffffff;
18+
}
19+
75% {
20+
width: 16.8px;
21+
height: 16.8px;
22+
background: #ffffff;
23+
}
24+
100% {
25+
width: 16.8px;
26+
height: 16.8px;
27+
background: #ffffff;
28+
}
29+
}
30+
@keyframes lds-default {
31+
0% {
32+
width: 16.8px;
33+
height: 16.8px;
34+
background: #ffffff;
35+
}
36+
25% {
37+
width: 16.8px;
38+
height: 16.8px;
39+
background: #ffffff;
40+
}
41+
50% {
42+
width: 28px;
43+
height: 28px;
44+
background: #ffffff;
45+
}
46+
75% {
47+
width: 16.8px;
48+
height: 16.8px;
49+
background: #ffffff;
50+
}
51+
100% {
52+
width: 16.8px;
53+
height: 16.8px;
54+
background: #ffffff;
55+
}
56+
}
57+
.lds-default {
58+
position: relative;
59+
}
60+
.lds-default div {
61+
position: absolute;
62+
-webkit-transform: translate(-50%, -50%);
63+
transform: translate(-50%, -50%);
64+
-webkit-animation: lds-default 1s linear infinite;
65+
animation: lds-default 1s linear infinite;
66+
border-radius: 50%;
67+
}
68+
.lds-default div:nth-child(1) {
69+
-webkit-animation-delay: -0.917s;
70+
animation-delay: -0.917s;
71+
left: 170px;
72+
top: 100px;
73+
}
74+
.lds-default div:nth-child(2) {
75+
-webkit-animation-delay: -0.833s;
76+
animation-delay: -0.833s;
77+
left: 160.622px;
78+
top: 135px;
79+
}
80+
.lds-default div:nth-child(3) {
81+
-webkit-animation-delay: -0.75s;
82+
animation-delay: -0.75s;
83+
left: 135px;
84+
top: 160.622px;
85+
}
86+
.lds-default div:nth-child(4) {
87+
-webkit-animation-delay: -0.667s;
88+
animation-delay: -0.667s;
89+
left: 100px;
90+
top: 170px;
91+
}
92+
.lds-default div:nth-child(5) {
93+
-webkit-animation-delay: -0.583s;
94+
animation-delay: -0.583s;
95+
left: 65px;
96+
top: 160.622px;
97+
}
98+
.lds-default div:nth-child(6) {
99+
-webkit-animation-delay: -0.5s;
100+
animation-delay: -0.5s;
101+
left: 39.378px;
102+
top: 135px;
103+
}
104+
.lds-default div:nth-child(7) {
105+
-webkit-animation-delay: -0.417s;
106+
animation-delay: -0.417s;
107+
left: 30px;
108+
top: 100px;
109+
}
110+
.lds-default div:nth-child(8) {
111+
-webkit-animation-delay: -0.333s;
112+
animation-delay: -0.333s;
113+
left: 39.378px;
114+
top: 65px;
115+
}
116+
.lds-default div:nth-child(9) {
117+
-webkit-animation-delay: -0.25s;
118+
animation-delay: -0.25s;
119+
left: 65px;
120+
top: 39.378px;
121+
}
122+
.lds-default div:nth-child(10) {
123+
-webkit-animation-delay: -0.167s;
124+
animation-delay: -0.167s;
125+
left: 100px;
126+
top: 30px;
127+
}
128+
.lds-default div:nth-child(11) {
129+
-webkit-animation-delay: -0.083s;
130+
animation-delay: -0.083s;
131+
left: 135px;
132+
top: 39.378px;
133+
}
134+
.lds-default div:nth-child(12) {
135+
-webkit-animation-delay: 0s;
136+
animation-delay: 0s;
137+
left: 160.622px;
138+
top: 65px;
139+
}
140+
</style></div>

‎dual-ring.html

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<div class="lds-css">
2+
<div style="width:100%;height:100%" class="lds-dual-ring">
3+
<div></div>
4+
</div>
5+
<style type="text/css">@-webkit-keyframes lds-dual-ring {
6+
0% {
7+
-webkit-transform: rotate(0);
8+
transform: rotate(0);
9+
}
10+
100% {
11+
-webkit-transform: rotate(360deg);
12+
transform: rotate(360deg);
13+
}
14+
}
15+
@keyframes lds-dual-ring {
16+
0% {
17+
-webkit-transform: rotate(0);
18+
transform: rotate(0);
19+
}
20+
100% {
21+
-webkit-transform: rotate(360deg);
22+
transform: rotate(360deg);
23+
}
24+
}
25+
.lds-dual-ring {
26+
position: relative;
27+
}
28+
.lds-dual-ring div {
29+
position: absolute;
30+
width: 140px;
31+
height: 140px;
32+
top: 30px;
33+
left: 30px;
34+
border-radius: 50%;
35+
border: 16px solid #000;
36+
border-color: #ffffff transparent #ffffff transparent;
37+
-webkit-animation: lds-dual-ring 1.3s linear infinite;
38+
animation: lds-dual-ring 1.3s linear infinite;
39+
}
40+
</style></div>

0 commit comments

Comments
 (0)