Skip to content

Commit 440847b

Browse files
lukehaaslukehaas
committed
Merge branch 'step2' of https://github.com/lukehaas/css-loaders into step2
merge
2 parents 39cb06e + 2cdec85 commit 440847b

File tree

9 files changed

+358
-237
lines changed

9 files changed

+358
-237
lines changed

‎less/fallback.less

Lines changed: 29 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -2,22 +2,33 @@
22
It means that loaders will fallback to a text state of simply saying "Loading..." in older browsers
33
*/
44

5-
.no-cssanimations .load-container .loader {
6-
text-indent:0;
7-
text-align:center;
8-
color:#FFF;
9-
font-size:17px;
10-
background:none;
11-
border:0 none;
12-
width:auto;
13-
height:auto;
14-
margin:1em auto;
15-
overflow:visible;
16-
box-shadow:none;
17-
-webkit-animation:none;
18-
animation:none;
5+
.no-cssanimations {
6+
7+
.load-container {
8+
9+
.loader {
10+
text-indent:0;
11+
text-align:center;
12+
color:#FFF;
13+
font-size:17px;
14+
background:none;
15+
border:0 none;
16+
width:auto;
17+
height:auto;
18+
margin:1em auto;
19+
overflow:visible;
20+
box-shadow:none;
21+
-webkit-animation:none;
22+
animation:none;
23+
24+
&:before,
25+
&:after {
26+
display:none;
27+
}
28+
29+
}
30+
31+
}
32+
1933
}
20-
.no-cssanimations .load-container .loader:before,
21-
.no-cssanimations .load-container .loader:after {
22-
display:none;
23-
}
34+

‎less/load1.less

Lines changed: 51 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,66 @@
11
@foreground: #FFF;
2-
.load1 .loader,.load1 .loader:before,.load1 .loader:after {
3-
background:@foreground;
4-
-webkit-animation:load1 1s infinite ease-in-out;
5-
animation:load1 1s infinite ease-in-out;
6-
width:1em;
7-
height:4em;
8-
}
9-
.load1 .loader:before,.load1 .loader:after {
10-
position:absolute;
11-
top:0;
12-
content:'';
13-
}
142

15-
.load1 .loader:before {
16-
left:-1.5em;
17-
-webkit-animation-delay:-0.32s;
18-
animation-delay:-0.32s;
19-
}
20-
.load1 .loader {
21-
color:@foreground;
22-
text-indent:-9999em;
23-
margin:88px auto;
24-
position:relative;
25-
font-size:11px;
26-
-webkit-transform: translateZ(0);
27-
-ms-transform: translateZ(0);
28-
transform: translateZ(0);
29-
-webkit-animation-delay:-0.16s;
30-
animation-delay:-0.16s;
31-
}
32-
.load1 .loader:after {
33-
left:1.5em;
3+
.load1 {
4+
5+
.loader,
6+
.loader:before,
7+
.loader:after {
8+
background:@foreground;
9+
-webkit-animation:load1 1s infinite ease-in-out;
10+
animation:load1 1s infinite ease-in-out;
11+
width:1em;
12+
height:4em;
13+
}
14+
15+
.loader {
16+
color:@foreground;
17+
text-indent:-9999em;
18+
margin:88px auto;
19+
position:relative;
20+
font-size:11px;
21+
-webkit-transform: translateZ(0);
22+
-ms-transform: translateZ(0);
23+
transform: translateZ(0);
24+
-webkit-animation-delay:-0.16s;
25+
animation-delay:-0.16s;
26+
27+
&:before,
28+
&:after {
29+
position:absolute;
30+
top:0;
31+
content:'';
32+
}
33+
34+
&:before {
35+
left:-1.5em;
36+
-webkit-animation-delay:-0.32s;
37+
animation-delay:-0.32s;
38+
}
39+
40+
&:after {
41+
left:1.5em;
42+
}
43+
44+
}
45+
3446
}
3547

48+
3649
@-webkit-keyframes load1 {.load1-frames;}
3750
@keyframes load1 {.load1-frames;}
3851

3952
.load1-frames() {
40-
0%,80%,100% {
53+
54+
0%,
55+
80%,
56+
100% {
4157
box-shadow:0 0;
4258
height:4em;
4359
}
60+
4461
40% {
4562
box-shadow:0 -2em;
4663
height:5em;
4764
}
48-
}
65+
66+
}

‎less/load2.less

Lines changed: 59 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,76 @@
11
@background: hsl(179,88%,41%);
22
@foreground: #FFF;
33

4-
.load2 .loader,.load2 .loader:before,.load2 .loader:after {
5-
border-radius:50%;
6-
}
7-
.load2 .loader:before,.load2 .loader:after {
8-
position:absolute;
9-
content:'';
10-
}
11-
.load2 .loader:before {
12-
width:5.2em;
13-
height:10.2em;
14-
background: @background;
15-
border-radius: 10.2em 0 0 10.2em;
16-
top:-0.1em;
17-
left:-0.1em;
18-
-webkit-transform-origin:5.2em 5.1em;
19-
transform-origin:5.2em 5.1em;
20-
-webkit-animation:load2 2s infinite ease 1.5s;
21-
animation:load2 2s infinite ease 1.5s;
22-
}
23-
.load2 .loader {
24-
color:@foreground;
25-
font-size:11px;
26-
text-indent:-99999em;
27-
margin:55px auto;
28-
position:relative;
29-
width:10em;
30-
height:10em;
31-
box-shadow: inset 0 0 0 1em;
32-
-webkit-transform: translateZ(0);
33-
-ms-transform: translateZ(0);
34-
transform: translateZ(0);
35-
}
36-
.load2 .loader:after {
37-
width:5.2em;
38-
height:10.2em;
39-
background: @background;
40-
border-radius: 0 10.2em 10.2em 0;
41-
top:-0.1em;
42-
left:5.1em;
43-
-webkit-transform-origin:0px 5.1em;
44-
transform-origin:0px 5.1em;
45-
-webkit-animation:load2 2s infinite ease;
46-
animation:load2 2s infinite ease;
4+
.load2 {
5+
6+
.loader,
7+
.loader:before,
8+
.loader:after {
9+
border-radius:50%;
10+
}
11+
12+
.loader {
13+
color:@foreground;
14+
font-size:11px;
15+
text-indent:-99999em;
16+
margin:55px auto;
17+
position:relative;
18+
width:10em;
19+
height:10em;
20+
box-shadow: inset 0 0 0 1em;
21+
-webkit-transform: translateZ(0);
22+
-ms-transform: translateZ(0);
23+
transform: translateZ(0);
24+
25+
&:before,
26+
&:after {
27+
position:absolute;
28+
content:'';
29+
}
30+
31+
&:before {
32+
width:5.2em;
33+
height:10.2em;
34+
background: @background;
35+
border-radius: 10.2em 0 0 10.2em;
36+
top:-0.1em;
37+
left:-0.1em;
38+
-webkit-transform-origin:5.2em 5.1em;
39+
transform-origin:5.2em 5.1em;
40+
-webkit-animation:load2 2s infinite ease 1.5s;
41+
animation:load2 2s infinite ease 1.5s;
42+
}
43+
44+
&:after {
45+
width:5.2em;
46+
height:10.2em;
47+
background: @background;
48+
border-radius: 0 10.2em 10.2em 0;
49+
top:-0.1em;
50+
left:5.1em;
51+
-webkit-transform-origin:0px 5.1em;
52+
transform-origin:0px 5.1em;
53+
-webkit-animation:load2 2s infinite ease;
54+
animation:load2 2s infinite ease;
55+
}
56+
57+
}
58+
4759
}
4860

4961
@-webkit-keyframes load2 {.load2-frames;}
5062
@keyframes load2 {.load2-frames;}
5163

5264
.load2-frames() {
65+
5366
0% {
5467
-webkit-transform:rotate(0deg);
5568
transform:rotate(0deg);
5669
}
70+
5771
100% {
5872
-webkit-transform:rotate(360deg);
5973
transform:rotate(360deg);
6074
}
61-
}
75+
76+
}

‎less/load3.less

Lines changed: 50 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,57 +1,67 @@
11
@background: hsl(179,88%,41%);
22
@foreground: #FFF;
33

4-
.load3 .loader {
5-
font-size:10px;
6-
margin:50px auto;
7-
text-indent:-9999em;
8-
width:11em;
9-
height:11em;
10-
border-radius:50%;
11-
background: @foreground;
12-
background: -moz-linear-gradient(left, fade(@foreground,100%) 10%, fade(@foreground,0%) 42%);
13-
background: -webkit-linear-gradient(left, fade(@foreground,100%) 10%,fade(@foreground,0%) 42%);
14-
background: -o-linear-gradient(left, fade(@foreground,100%) 10%,fade(@foreground,0%) 42%);
15-
background: -ms-linear-gradient(left, fade(@foreground,100%) 10%,fade(@foreground,0%) 42%);
16-
background: linear-gradient(to right, fade(@foreground,100%) 10%,fade(@foreground,0%) 42%);
17-
position: relative;
18-
-webkit-animation:load3 1.4s infinite linear;
19-
animation:load3 1.4s infinite linear;
20-
-webkit-transform: translateZ(0);
21-
-ms-transform: translateZ(0);
22-
transform: translateZ(0);
23-
}
24-
.load3 .loader:before {
25-
width:50%;
26-
height:50%;
27-
background: @foreground;
28-
border-radius: 100% 0 0 0;
29-
position:absolute;
30-
top:0;
31-
left:0;
32-
content:'';
33-
}
4+
.load3 {
5+
6+
.loader {
7+
font-size:10px;
8+
margin:50px auto;
9+
text-indent:-9999em;
10+
width:11em;
11+
height:11em;
12+
border-radius:50%;
13+
background: @foreground;
14+
background: -moz-linear-gradient(left, fade(@foreground,100%) 10%, fade(@foreground,0%) 42%);
15+
background: -webkit-linear-gradient(left, fade(@foreground,100%) 10%,fade(@foreground,0%) 42%);
16+
background: -o-linear-gradient(left, fade(@foreground,100%) 10%,fade(@foreground,0%) 42%);
17+
background: -ms-linear-gradient(left, fade(@foreground,100%) 10%,fade(@foreground,0%) 42%);
18+
background: linear-gradient(to right, fade(@foreground,100%) 10%,fade(@foreground,0%) 42%);
19+
position: relative;
20+
-webkit-animation:load3 1.4s infinite linear;
21+
animation:load3 1.4s infinite linear;
22+
-webkit-transform: translateZ(0);
23+
-ms-transform: translateZ(0);
24+
transform: translateZ(0);
25+
26+
&:before {
27+
width:50%;
28+
height:50%;
29+
background: @foreground;
30+
border-radius: 100% 0 0 0;
31+
position:absolute;
32+
top:0;
33+
left:0;
34+
content:'';
35+
}
36+
37+
&:after {
38+
background:@background;
39+
width:75%;
40+
height:75%;
41+
border-radius:50%;
42+
content:'';
43+
margin:auto;
44+
position: absolute;
45+
top: 0; left: 0; bottom: 0; right: 0;
46+
}
47+
48+
}
3449

35-
.load3 .loader:after {
36-
background:@background;
37-
width:75%;
38-
height:75%;
39-
border-radius:50%;
40-
content:'';
41-
margin:auto;
42-
position: absolute;
43-
top: 0; left: 0; bottom: 0; right: 0;
4450
}
51+
4552
@-webkit-keyframes load3 {.load3-frames;}
4653
@keyframes load3 {.load3-frames;}
4754

4855
.load3-frames() {
56+
4957
0% {
5058
-webkit-transform:rotate(0deg);
5159
transform:rotate(0deg);
5260
}
61+
5362
100% {
5463
-webkit-transform:rotate(360deg);
5564
transform:rotate(360deg);
5665
}
57-
}
66+
67+
}

0 commit comments

Comments
 (0)