Skip to content

Commit 8a749f7

Browse files
zbryiktzbryikt
committed
update and fix circle loader in safari
1 parent 775e1fa commit 8a749f7

33 files changed

+466
-451
lines changed

‎README.md

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
[Live Demo](https://loading.io/css/)
44

5-
12 small, elegant pure css spinners collection for website ajax and loading animation.
5+
collection of 12 small, elegant pure css spinners for your website loading animation.
66

77
![css spinner](https://github.com/loadingio/css-spinner/blob/master/thumbnail.gif?raw=true)
88

@@ -17,17 +17,17 @@
1717

1818
## Usage
1919

20-
[loading.io](https://loading.io/css/) provides a web interface to quickly choose and copy your desired spinners, yet you can still find the source code in this repository. The simplest usage is as:
20+
[loading.io](https://loading.io/css/) provides a [web interface](https://loading.io/css/) to quickly choose and copy your desired spinners, yet you can still find the source code in this repository. The simplest usage is as:
2121

22-
1. Find and download the html file of desired loader under build/ folder.
22+
1. Find and download the html file of desired loader under [build/](https://github.com/loadingio/css-spinner/tree/master/build) folder.
2323
2. Copy its content to the place you want to use this loader.
2424
3. Done.
2525

26-
Separated CSS and HTML files are also available under build folder so that you can reuse the css to reduce payload size.
26+
Separated CSS and HTML files are also available under [build](https://github.com/loadingio/css-spinner/tree/master/build) folder so that you can reuse the css to reduce payload size.
2727

28-
We also provide stylus and pug source files for better integrating these spinners into your project. Find corresponding stylus and pug files for your desired spinners under src/ folders.
28+
We also provide stylus and pug source files for better integrating these spinners into your project. Find corresponding stylus and pug files for your desired spinners under [src/](https://github.com/loadingio/css-spinner/tree/master/src) folders.
2929

30-
Additionally, you will need vars.styl and basic.styl if you are going to build by yourself. See following section for more detail.
30+
Additionally, you will need [vars.styl](https://github.com/loadingio/css-spinner/blob/master/vars.styl) and [basic.styl](https://github.com/loadingio/css-spinner/blob/master/basic.styl) if you are going to build by yourself. See following section for more detail.
3131

3232

3333
## Customization

‎build/circle/main.css

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,14 @@
11
.lds-circle {
22
display: inline-block;
3-
width: 51px;
4-
height: 51px;
5-
margin: 6px;
3+
transform: translateZ(1px);
4+
}
5+
.lds-circle > div {
6+
display: inline-block;
7+
width: 64px;
8+
height: 64px;
9+
margin: 8px;
610
border-radius: 50%;
7-
background: #900;
11+
background: #fff;
812
animation: lds-circle 2.4s cubic-bezier(0, 0.2, 0.8, 1) infinite;
913
}
1014
@keyframes lds-circle {

‎build/circle/main.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
<div class="lds-circle"></div>
1+
<div class="lds-circle"><div></div></div>

‎build/circle/sample.html

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,15 @@
11
<style type="text/css">
22
.lds-circle {
33
display: inline-block;
4-
width: 51px;
5-
height: 51px;
6-
margin: 6px;
4+
transform: translateZ(1px);
5+
}
6+
.lds-circle > div {
7+
display: inline-block;
8+
width: 64px;
9+
height: 64px;
10+
margin: 8px;
711
border-radius: 50%;
8-
background: #900;
12+
background: #fff;
913
animation: lds-circle 2.4s cubic-bezier(0, 0.2, 0.8, 1) infinite;
1014
}
1115
@keyframes lds-circle {
@@ -25,4 +29,4 @@
2529
}
2630

2731
</style>
28-
<div class="lds-circle"></div>
32+
<div class="lds-circle"><div></div></div>

‎build/default/main.css

Lines changed: 28 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,76 +1,76 @@
11
.lds-default {
22
display: inline-block;
33
position: relative;
4-
width: 64px;
5-
height: 64px;
4+
width: 80px;
5+
height: 80px;
66
}
77
.lds-default div {
88
position: absolute;
9-
width: 5px;
10-
height: 5px;
9+
width: 6px;
10+
height: 6px;
1111
background: #fff;
1212
border-radius: 50%;
1313
animation: lds-default 1.2s linear infinite;
1414
}
1515
.lds-default div:nth-child(1) {
1616
animation-delay: 0s;
17-
top: 29px;
18-
left: 53px;
17+
top: 37px;
18+
left: 66px;
1919
}
2020
.lds-default div:nth-child(2) {
2121
animation-delay: -0.1s;
22-
top: 18px;
23-
left: 50px;
22+
top: 22px;
23+
left: 62px;
2424
}
2525
.lds-default div:nth-child(3) {
2626
animation-delay: -0.2s;
27-
top: 9px;
28-
left: 41px;
27+
top: 11px;
28+
left: 52px;
2929
}
3030
.lds-default div:nth-child(4) {
3131
animation-delay: -0.3s;
32-
top: 6px;
33-
left: 29px;
32+
top: 7px;
33+
left: 37px;
3434
}
3535
.lds-default div:nth-child(5) {
3636
animation-delay: -0.4s;
37-
top: 9px;
38-
left: 18px;
37+
top: 11px;
38+
left: 22px;
3939
}
4040
.lds-default div:nth-child(6) {
4141
animation-delay: -0.5s;
42-
top: 18px;
43-
left: 9px;
42+
top: 22px;
43+
left: 11px;
4444
}
4545
.lds-default div:nth-child(7) {
4646
animation-delay: -0.6s;
47-
top: 29px;
48-
left: 6px;
47+
top: 37px;
48+
left: 7px;
4949
}
5050
.lds-default div:nth-child(8) {
5151
animation-delay: -0.7s;
52-
top: 41px;
53-
left: 9px;
52+
top: 52px;
53+
left: 11px;
5454
}
5555
.lds-default div:nth-child(9) {
5656
animation-delay: -0.8s;
57-
top: 50px;
58-
left: 18px;
57+
top: 62px;
58+
left: 22px;
5959
}
6060
.lds-default div:nth-child(10) {
6161
animation-delay: -0.9s;
62-
top: 53px;
63-
left: 29px;
62+
top: 66px;
63+
left: 37px;
6464
}
6565
.lds-default div:nth-child(11) {
6666
animation-delay: -1s;
67-
top: 50px;
68-
left: 41px;
67+
top: 62px;
68+
left: 52px;
6969
}
7070
.lds-default div:nth-child(12) {
7171
animation-delay: -1.1s;
72-
top: 41px;
73-
left: 50px;
72+
top: 52px;
73+
left: 62px;
7474
}
7575
@keyframes lds-default {
7676
0%, 20%, 80%, 100% {

‎build/default/sample.html

Lines changed: 28 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -2,76 +2,76 @@
22
.lds-default {
33
display: inline-block;
44
position: relative;
5-
width: 64px;
6-
height: 64px;
5+
width: 80px;
6+
height: 80px;
77
}
88
.lds-default div {
99
position: absolute;
10-
width: 5px;
11-
height: 5px;
10+
width: 6px;
11+
height: 6px;
1212
background: #fff;
1313
border-radius: 50%;
1414
animation: lds-default 1.2s linear infinite;
1515
}
1616
.lds-default div:nth-child(1) {
1717
animation-delay: 0s;
18-
top: 29px;
19-
left: 53px;
18+
top: 37px;
19+
left: 66px;
2020
}
2121
.lds-default div:nth-child(2) {
2222
animation-delay: -0.1s;
23-
top: 18px;
24-
left: 50px;
23+
top: 22px;
24+
left: 62px;
2525
}
2626
.lds-default div:nth-child(3) {
2727
animation-delay: -0.2s;
28-
top: 9px;
29-
left: 41px;
28+
top: 11px;
29+
left: 52px;
3030
}
3131
.lds-default div:nth-child(4) {
3232
animation-delay: -0.3s;
33-
top: 6px;
34-
left: 29px;
33+
top: 7px;
34+
left: 37px;
3535
}
3636
.lds-default div:nth-child(5) {
3737
animation-delay: -0.4s;
38-
top: 9px;
39-
left: 18px;
38+
top: 11px;
39+
left: 22px;
4040
}
4141
.lds-default div:nth-child(6) {
4242
animation-delay: -0.5s;
43-
top: 18px;
44-
left: 9px;
43+
top: 22px;
44+
left: 11px;
4545
}
4646
.lds-default div:nth-child(7) {
4747
animation-delay: -0.6s;
48-
top: 29px;
49-
left: 6px;
48+
top: 37px;
49+
left: 7px;
5050
}
5151
.lds-default div:nth-child(8) {
5252
animation-delay: -0.7s;
53-
top: 41px;
54-
left: 9px;
53+
top: 52px;
54+
left: 11px;
5555
}
5656
.lds-default div:nth-child(9) {
5757
animation-delay: -0.8s;
58-
top: 50px;
59-
left: 18px;
58+
top: 62px;
59+
left: 22px;
6060
}
6161
.lds-default div:nth-child(10) {
6262
animation-delay: -0.9s;
63-
top: 53px;
64-
left: 29px;
63+
top: 66px;
64+
left: 37px;
6565
}
6666
.lds-default div:nth-child(11) {
6767
animation-delay: -1s;
68-
top: 50px;
69-
left: 41px;
68+
top: 62px;
69+
left: 52px;
7070
}
7171
.lds-default div:nth-child(12) {
7272
animation-delay: -1.1s;
73-
top: 41px;
74-
left: 50px;
73+
top: 52px;
74+
left: 62px;
7575
}
7676
@keyframes lds-default {
7777
0%, 20%, 80%, 100% {

‎build/dual-ring/main.css

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
11
.lds-dual-ring {
22
display: inline-block;
3-
width: 64px;
4-
height: 64px;
3+
width: 80px;
4+
height: 80px;
55
}
66
.lds-dual-ring:after {
77
content: " ";
88
display: block;
9-
width: 46px;
10-
height: 46px;
11-
margin: 1px;
9+
width: 64px;
10+
height: 64px;
11+
margin: 8px;
1212
border-radius: 50%;
13-
border: 5px solid #900;
14-
border-color: #900 transparent #900 transparent;
13+
border: 6px solid #fff;
14+
border-color: #fff transparent #fff transparent;
1515
animation: lds-dual-ring 1.2s linear infinite;
1616
}
1717
@keyframes lds-dual-ring {

‎build/dual-ring/sample.html

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
11
<style type="text/css">
22
.lds-dual-ring {
33
display: inline-block;
4-
width: 64px;
5-
height: 64px;
4+
width: 80px;
5+
height: 80px;
66
}
77
.lds-dual-ring:after {
88
content: " ";
99
display: block;
10-
width: 46px;
11-
height: 46px;
12-
margin: 1px;
10+
width: 64px;
11+
height: 64px;
12+
margin: 8px;
1313
border-radius: 50%;
14-
border: 5px solid #900;
15-
border-color: #900 transparent #900 transparent;
14+
border: 6px solid #fff;
15+
border-color: #fff transparent #fff transparent;
1616
animation: lds-dual-ring 1.2s linear infinite;
1717
}
1818
@keyframes lds-dual-ring {

‎build/ellipsis/main.css

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,32 @@
11
.lds-ellipsis {
22
display: inline-block;
33
position: relative;
4-
width: 64px;
5-
height: 64px;
4+
width: 80px;
5+
height: 80px;
66
}
77
.lds-ellipsis div {
88
position: absolute;
9-
top: 27px;
10-
width: 11px;
11-
height: 11px;
9+
top: 33px;
10+
width: 13px;
11+
height: 13px;
1212
border-radius: 50%;
1313
background: #fff;
1414
animation-timing-function: cubic-bezier(0, 1, 1, 0);
1515
}
1616
.lds-ellipsis div:nth-child(1) {
17-
left: 6px;
17+
left: 8px;
1818
animation: lds-ellipsis1 0.6s infinite;
1919
}
2020
.lds-ellipsis div:nth-child(2) {
21-
left: 6px;
21+
left: 8px;
2222
animation: lds-ellipsis2 0.6s infinite;
2323
}
2424
.lds-ellipsis div:nth-child(3) {
25-
left: 26px;
25+
left: 32px;
2626
animation: lds-ellipsis2 0.6s infinite;
2727
}
2828
.lds-ellipsis div:nth-child(4) {
29-
left: 45px;
29+
left: 56px;
3030
animation: lds-ellipsis3 0.6s infinite;
3131
}
3232
@keyframes lds-ellipsis1 {
@@ -50,6 +50,6 @@
5050
transform: translate(0, 0);
5151
}
5252
100% {
53-
transform: translate(19px, 0);
53+
transform: translate(24px, 0);
5454
}
5555
}

0 commit comments

Comments
 (0)