Skip to content

Commit f42911f

Browse files
zbryiktzbryikt
committed
use scaled shape to provide better image quality
1 parent f152476 commit f42911f

6 files changed

Lines changed: 140 additions & 144 deletions

File tree

‎dist/loading-css.zip‎

-69 Bytes
Binary file not shown.

‎dist/loading.css‎

Lines changed: 43 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
position: relative;
1212
color: inherit;
1313
display: inline-block;
14+
box-sizing: content-box;
1415
}
1516
.ld-ball:after,
1617
.ld-ring:after,
@@ -20,66 +21,66 @@
2021
.ld-square:after,
2122
.ld-pie:after,
2223
.ld-spinner:after {
23-
position: absolute;
24-
margin: auto;
25-
width: 100%;
26-
height: 100%;
27-
top: 0;
28-
left: 0;
29-
right: 0;
30-
bottom: 0;
3124
content: " ";
32-
display: inline-block;
33-
background: center center no-repeat;
34-
background-size: cover;
35-
}
36-
.ld-ball:after {
37-
border-radius: 50%;
38-
background: currentColor;
25+
display: block;
26+
width: 10em;
27+
height: 10em;
28+
box-sizing: border-box;
29+
transform-origin: 0em 0em;
30+
transform: translateZ(0) scale(0.1);
31+
backface-visibility: hidden;
3932
}
40-
.ld-pie:after {
41-
width: 0;
42-
height: 0;
33+
.ld-ring:after {
4334
border-radius: 50%;
44-
border-style: solid;
45-
border-width: 0.5em;
46-
-webkit-background-clip: padding-box;
47-
border-color: currentColor currentColor currentColor transparent;
35+
border: 1.5em solid currentColor;
36+
border-left-color: transparent;
4837
}
49-
.ld-ring:after {
38+
.ld-ball:after {
5039
border-radius: 50%;
51-
border-style: solid;
52-
border-width: 0.15em;
53-
-webkit-background-clip: padding-box;
54-
border-color: currentColor currentColor currentColor transparent;
55-
box-sizing: border-box;
40+
background: currentColor;
5641
}
5742
.ld-hourglass:after {
58-
width: 0;
59-
height: 0;
60-
background: none;
6143
border-radius: 50%;
62-
border-style: solid;
63-
border-width: 0.5em;
64-
border-color: currentColor transparent currentColor transparent;
44+
border: 5em solid currentColor;
45+
border-left-color: transparent;
46+
border-right-color: transparent;
6547
}
6648
.ld-cross:after {
67-
width: 18%;
68-
height: 18%;
49+
position: absolute;
50+
height: 2.5em;
51+
transform: translateZ(0) scale(0.1) translate(0, 3.5em);
52+
background: currentColor;
53+
}
54+
.ld-cross:before {
55+
content: " ";
56+
display: block;
57+
width: 10em;
58+
height: 10em;
59+
box-sizing: border-box;
60+
transform-origin: 0em 0em;
61+
transform: translateZ(0) scale(0.1);
62+
backface-visibility: hidden;
63+
position: absolute;
64+
width: 2.5em;
65+
transform: translateZ(0) scale(0.1) translate(3.5em, 0);
6966
background: currentColor;
70-
box-shadow: 0 0.18em 0 1px currentColor, 0 -0.18em 0 1px currentColor, 0.18em 0 0 1px currentColor, -0.18em 0 0 1px currentColor, 0 0.36em 0 1px currentColor, 0 -0.36em 0 1px currentColor, 0.36em 0 0 1px currentColor, -0.36em 0 0 1px currentColor;
7167
}
7268
.ld-square:after {
73-
width: 90%;
74-
height: 90%;
7569
background: currentColor;
7670
}
71+
.ld-pie:after {
72+
border-radius: 50%;
73+
border: 5em solid currentColor;
74+
border-left-color: transparent;
75+
}
7776
.ld-spinner:after {
78-
width: 20%;
79-
height: 20%;
77+
position: absolute;
78+
width: 2em;
79+
height: 2em;
80+
transform: translateZ(0) scale(0.1) translate(4em, 4em);
8081
border-radius: 50%;
8182
background: none;
82-
box-shadow: 0 0.5em 0 0 currentColor,0 -.5em 0 0 currentColor,.5em 0 0 0 currentColor,-.5em 0 0 0 currentColor,.35355339059327373em .35355339059327373em 0 0 currentColor,-.35355339059327373em .35355339059327373em 0 0 currentColor,.35355339059327373em -.35355339059327373em 0 0 currentColor,-.35355339059327373em -.35355339059327373em 0 0 currentColor;
83+
box-shadow: 0 5em 0 0 currentColor,0 -5em 0 0 currentColor,5em 0 0 0 currentColor,-5em 0 0 0 currentColor,3.5355339059327373em 3.5355339059327373em 0 0 currentColor,-3.5355339059327373em 3.5355339059327373em 0 0 currentColor,3.5355339059327373em -3.5355339059327373em 0 0 currentColor,-3.5355339059327373em -3.5355339059327373em 0 0 currentColor;
8384
}
8485
.ld-loader {
8586
background-size: cover;

‎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.

‎dist/loading.utils.css‎

Lines changed: 43 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
position: relative;
1212
color: inherit;
1313
display: inline-block;
14+
box-sizing: content-box;
1415
}
1516
.ld-ball:after,
1617
.ld-ring:after,
@@ -20,66 +21,66 @@
2021
.ld-square:after,
2122
.ld-pie:after,
2223
.ld-spinner:after {
23-
position: absolute;
24-
margin: auto;
25-
width: 100%;
26-
height: 100%;
27-
top: 0;
28-
left: 0;
29-
right: 0;
30-
bottom: 0;
3124
content: " ";
32-
display: inline-block;
33-
background: center center no-repeat;
34-
background-size: cover;
35-
}
36-
.ld-ball:after {
37-
border-radius: 50%;
38-
background: currentColor;
25+
display: block;
26+
width: 10em;
27+
height: 10em;
28+
box-sizing: border-box;
29+
transform-origin: 0em 0em;
30+
transform: translateZ(0) scale(0.1);
31+
backface-visibility: hidden;
3932
}
40-
.ld-pie:after {
41-
width: 0;
42-
height: 0;
33+
.ld-ring:after {
4334
border-radius: 50%;
44-
border-style: solid;
45-
border-width: 0.5em;
46-
-webkit-background-clip: padding-box;
47-
border-color: currentColor currentColor currentColor transparent;
35+
border: 1.5em solid currentColor;
36+
border-left-color: transparent;
4837
}
49-
.ld-ring:after {
38+
.ld-ball:after {
5039
border-radius: 50%;
51-
border-style: solid;
52-
border-width: 0.15em;
53-
-webkit-background-clip: padding-box;
54-
border-color: currentColor currentColor currentColor transparent;
55-
box-sizing: border-box;
40+
background: currentColor;
5641
}
5742
.ld-hourglass:after {
58-
width: 0;
59-
height: 0;
60-
background: none;
6143
border-radius: 50%;
62-
border-style: solid;
63-
border-width: 0.5em;
64-
border-color: currentColor transparent currentColor transparent;
44+
border: 5em solid currentColor;
45+
border-left-color: transparent;
46+
border-right-color: transparent;
6547
}
6648
.ld-cross:after {
67-
width: 18%;
68-
height: 18%;
49+
position: absolute;
50+
height: 2.5em;
51+
transform: translateZ(0) scale(0.1) translate(0, 3.5em);
52+
background: currentColor;
53+
}
54+
.ld-cross:before {
55+
content: " ";
56+
display: block;
57+
width: 10em;
58+
height: 10em;
59+
box-sizing: border-box;
60+
transform-origin: 0em 0em;
61+
transform: translateZ(0) scale(0.1);
62+
backface-visibility: hidden;
63+
position: absolute;
64+
width: 2.5em;
65+
transform: translateZ(0) scale(0.1) translate(3.5em, 0);
6966
background: currentColor;
70-
box-shadow: 0 0.18em 0 1px currentColor, 0 -0.18em 0 1px currentColor, 0.18em 0 0 1px currentColor, -0.18em 0 0 1px currentColor, 0 0.36em 0 1px currentColor, 0 -0.36em 0 1px currentColor, 0.36em 0 0 1px currentColor, -0.36em 0 0 1px currentColor;
7167
}
7268
.ld-square:after {
73-
width: 90%;
74-
height: 90%;
7569
background: currentColor;
7670
}
71+
.ld-pie:after {
72+
border-radius: 50%;
73+
border: 5em solid currentColor;
74+
border-left-color: transparent;
75+
}
7776
.ld-spinner:after {
78-
width: 20%;
79-
height: 20%;
77+
position: absolute;
78+
width: 2em;
79+
height: 2em;
80+
transform: translateZ(0) scale(0.1) translate(4em, 4em);
8081
border-radius: 50%;
8182
background: none;
82-
box-shadow: 0 0.5em 0 0 currentColor,0 -.5em 0 0 currentColor,.5em 0 0 0 currentColor,-.5em 0 0 0 currentColor,.35355339059327373em .35355339059327373em 0 0 currentColor,-.35355339059327373em .35355339059327373em 0 0 currentColor,.35355339059327373em -.35355339059327373em 0 0 currentColor,-.35355339059327373em -.35355339059327373em 0 0 currentColor;
83+
box-shadow: 0 5em 0 0 currentColor,0 -5em 0 0 currentColor,5em 0 0 0 currentColor,-5em 0 0 0 currentColor,3.5355339059327373em 3.5355339059327373em 0 0 currentColor,-3.5355339059327373em 3.5355339059327373em 0 0 currentColor,3.5355339059327373em -3.5355339059327373em 0 0 currentColor,-3.5355339059327373em -3.5355339059327373em 0 0 currentColor;
8384
}
8485
.ld-loader {
8586
background-size: cover;

‎dist/loading.utils.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/shape.styl‎

Lines changed: 52 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,86 +1,80 @@
1-
types = ld-ball ld-ring ld-hourglass ld-loader ld-cross ld-square ld-pie ld-spinner
2-
3-
list = '.' + types[0]
4-
for type in types
5-
push(list, '.' + type)
6-
7-
shapeCls = join(',',list)
8-
9-
{shapeCls}
1+
.ld-ball, .ld-ring, .ld-hourglass, .ld-loader, .ld-cross, .ld-square, .ld-pie, .ld-spinner
102
width: 1em
113
height: 1em
124
position: relative
135
color: inherit
146
display: inline-block
7+
box-sizing: content-box
158
&:after
16-
position: absolute
17-
margin: auto
18-
width: 100%
19-
height: 100%
20-
top: 0
21-
left: 0
22-
right: 0
23-
bottom: 0
249
content: " "
25-
display: inline-block
26-
background: center center no-repeat
27-
background-size: cover
10+
display: block
11+
width: 10em
12+
height: 10em
13+
box-sizing: border-box
14+
transform-origin: 0em 0em
15+
transform: translateZ(0) scale(0.1)
16+
backface-visibility: hidden
2817

29-
.ld-ball:after
30-
border-radius: 50%
31-
background: currentColor
32-
33-
.ld-pie:after
34-
width: 0
35-
height: 0
18+
.ld-ring:after
3619
border-radius: 50%
37-
border-style: solid
38-
border-width: .5em
39-
-webkit-background-clip: padding-box
40-
border-color: currentColor currentColor currentColor transparent
20+
border: 1.5em solid currentColor
21+
border-left-color: transparent
4122

42-
.ld-ring:after
23+
.ld-ball:after
4324
border-radius: 50%
44-
border-style: solid
45-
border-width: .15em
46-
-webkit-background-clip: padding-box
47-
border-color: currentColor currentColor currentColor transparent
48-
box-sizing: border-box
25+
background: currentColor
4926

5027
.ld-hourglass:after
51-
width: 0
52-
height: 0
53-
background: none
5428
border-radius: 50%
55-
border-style: solid
56-
border-width: .5em
57-
border-color: currentColor transparent currentColor transparent
29+
border: 5em solid currentColor
30+
border-left-color: transparent
31+
border-right-color: transparent
5832

5933
.ld-cross:after
60-
width: 18%
61-
height: 18%
34+
position: absolute
35+
height: 2.5em
36+
transform: translateZ(0) scale(0.1) translate(0,3.5em)
37+
background: currentColor
38+
39+
.ld-cross:before
40+
content: " "
41+
display: block
42+
width: 10em
43+
height: 10em
44+
box-sizing: border-box
45+
transform-origin: 0em 0em
46+
transform: translateZ(0) scale(0.1)
47+
backface-visibility: hidden
48+
position: absolute
49+
width: 2.5em
50+
transform: translateZ(0) scale(0.1) translate(3.5em,0)
6251
background: currentColor
63-
box-shadow: 0 .18em 0 1px currentColor, 0 -.18em 0 1px currentColor, .18em 0 0 1px currentColor, -.18em 0 0 1px currentColor, 0 .36em 0 1px currentColor, 0 -.36em 0 1px currentColor, .36em 0 0 1px currentColor, -.36em 0 0 1px currentColor
52+
6453

6554
.ld-square:after
66-
width: 90%
67-
height: 90%
6855
background: currentColor
6956

57+
.ld-pie:after
58+
border-radius: 50%
59+
border: 5em solid currentColor
60+
border-left-color: transparent
61+
7062
.ld-spinner:after
71-
width: 20%
72-
height: 20%
63+
position: absolute
64+
width: 2em
65+
height: 2em
66+
transform: translateZ(0) scale(0.1) translate(4em, 4em)
7367
border-radius: 50%
7468
background: none
7569
box-shadow: unquote(join(',',
76-
'0 0.5em 0 0 currentColor',
77-
'0 -.5em 0 0 currentColor',
78-
'.5em 0 0 0 currentColor',
79-
'-.5em 0 0 0 currentColor',
80-
'.35355339059327373em .35355339059327373em 0 0 currentColor',
81-
'-.35355339059327373em .35355339059327373em 0 0 currentColor',
82-
'.35355339059327373em -.35355339059327373em 0 0 currentColor',
83-
'-.35355339059327373em -.35355339059327373em 0 0 currentColor'
70+
'0 5em 0 0 currentColor',
71+
'0 -5em 0 0 currentColor',
72+
'5em 0 0 0 currentColor',
73+
'-5em 0 0 0 currentColor',
74+
'3.5355339059327373em 3.5355339059327373em 0 0 currentColor',
75+
'-3.5355339059327373em 3.5355339059327373em 0 0 currentColor',
76+
'3.5355339059327373em -3.5355339059327373em 0 0 currentColor',
77+
'-3.5355339059327373em -3.5355339059327373em 0 0 currentColor'
8478
))
8579

8680
.ld-loader

0 commit comments

Comments
 (0)