Skip to content

Commit f10fa86

Browse files
zbryiktzbryikt
committed
use 2em as default size; add comment about why we use 2em + scale(.5)
1 parent f42911f commit f10fa86

6 files changed

Lines changed: 62 additions & 61 deletions

File tree

‎dist/loading-css.zip‎

0 Bytes
Binary file not shown.

‎dist/loading.css‎

Lines changed: 16 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -23,16 +23,16 @@
2323
.ld-spinner:after {
2424
content: " ";
2525
display: block;
26-
width: 10em;
27-
height: 10em;
26+
width: 2em;
27+
height: 2em;
2828
box-sizing: border-box;
2929
transform-origin: 0em 0em;
30-
transform: translateZ(0) scale(0.1);
30+
transform: translateZ(0) scale(0.5);
3131
backface-visibility: hidden;
3232
}
3333
.ld-ring:after {
3434
border-radius: 50%;
35-
border: 1.5em solid currentColor;
35+
border: 0.3em solid currentColor;
3636
border-left-color: transparent;
3737
}
3838
.ld-ball:after {
@@ -41,46 +41,45 @@
4141
}
4242
.ld-hourglass:after {
4343
border-radius: 50%;
44-
border: 5em solid currentColor;
44+
border: 1em solid currentColor;
4545
border-left-color: transparent;
4646
border-right-color: transparent;
4747
}
4848
.ld-cross:after {
4949
position: absolute;
50-
height: 2.5em;
51-
transform: translateZ(0) scale(0.1) translate(0, 3.5em);
50+
height: 0.5em;
51+
transform: translateZ(0) scale(0.5) translate(0, 0.75em);
5252
background: currentColor;
5353
}
5454
.ld-cross:before {
5555
content: " ";
5656
display: block;
57-
width: 10em;
58-
height: 10em;
57+
width: 0.5em;
58+
height: 2em;
5959
box-sizing: border-box;
6060
transform-origin: 0em 0em;
61-
transform: translateZ(0) scale(0.1);
6261
backface-visibility: hidden;
6362
position: absolute;
64-
width: 2.5em;
65-
transform: translateZ(0) scale(0.1) translate(3.5em, 0);
63+
width: 0.5em;
64+
transform: translateZ(0) scale(0.5) translate(0.75em, 0);
6665
background: currentColor;
6766
}
6867
.ld-square:after {
6968
background: currentColor;
7069
}
7170
.ld-pie:after {
7271
border-radius: 50%;
73-
border: 5em solid currentColor;
72+
border: 1em solid currentColor;
7473
border-left-color: transparent;
7574
}
7675
.ld-spinner:after {
7776
position: absolute;
78-
width: 2em;
79-
height: 2em;
80-
transform: translateZ(0) scale(0.1) translate(4em, 4em);
77+
width: 0.4em;
78+
height: 0.4em;
79+
transform: translateZ(0) scale(0.5) translate(0.8em, 0.8em);
8180
border-radius: 50%;
8281
background: none;
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;
82+
box-shadow: 0 1em 0 currentColor,0 -1em 0 currentColor,1em 0 0 currentColor,-1em 0 0 currentColor,.70710678em .70710678em 0 currentColor,-.70710678em .70710678em 0 currentColor,.70710678em -.70710678em 0 currentColor,-.70710678em -.70710678em 0 currentColor;
8483
}
8584
.ld-loader {
8685
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: 16 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -23,16 +23,16 @@
2323
.ld-spinner:after {
2424
content: " ";
2525
display: block;
26-
width: 10em;
27-
height: 10em;
26+
width: 2em;
27+
height: 2em;
2828
box-sizing: border-box;
2929
transform-origin: 0em 0em;
30-
transform: translateZ(0) scale(0.1);
30+
transform: translateZ(0) scale(0.5);
3131
backface-visibility: hidden;
3232
}
3333
.ld-ring:after {
3434
border-radius: 50%;
35-
border: 1.5em solid currentColor;
35+
border: 0.3em solid currentColor;
3636
border-left-color: transparent;
3737
}
3838
.ld-ball:after {
@@ -41,46 +41,45 @@
4141
}
4242
.ld-hourglass:after {
4343
border-radius: 50%;
44-
border: 5em solid currentColor;
44+
border: 1em solid currentColor;
4545
border-left-color: transparent;
4646
border-right-color: transparent;
4747
}
4848
.ld-cross:after {
4949
position: absolute;
50-
height: 2.5em;
51-
transform: translateZ(0) scale(0.1) translate(0, 3.5em);
50+
height: 0.5em;
51+
transform: translateZ(0) scale(0.5) translate(0, 0.75em);
5252
background: currentColor;
5353
}
5454
.ld-cross:before {
5555
content: " ";
5656
display: block;
57-
width: 10em;
58-
height: 10em;
57+
width: 0.5em;
58+
height: 2em;
5959
box-sizing: border-box;
6060
transform-origin: 0em 0em;
61-
transform: translateZ(0) scale(0.1);
6261
backface-visibility: hidden;
6362
position: absolute;
64-
width: 2.5em;
65-
transform: translateZ(0) scale(0.1) translate(3.5em, 0);
63+
width: 0.5em;
64+
transform: translateZ(0) scale(0.5) translate(0.75em, 0);
6665
background: currentColor;
6766
}
6867
.ld-square:after {
6968
background: currentColor;
7069
}
7170
.ld-pie:after {
7271
border-radius: 50%;
73-
border: 5em solid currentColor;
72+
border: 1em solid currentColor;
7473
border-left-color: transparent;
7574
}
7675
.ld-spinner:after {
7776
position: absolute;
78-
width: 2em;
79-
height: 2em;
80-
transform: translateZ(0) scale(0.1) translate(4em, 4em);
77+
width: 0.4em;
78+
height: 0.4em;
79+
transform: translateZ(0) scale(0.5) translate(0.8em, 0.8em);
8180
border-radius: 50%;
8281
background: none;
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;
82+
box-shadow: 0 1em 0 currentColor,0 -1em 0 currentColor,1em 0 0 currentColor,-1em 0 0 currentColor,.70710678em .70710678em 0 currentColor,-.70710678em .70710678em 0 currentColor,.70710678em -.70710678em 0 currentColor,-.70710678em -.70710678em 0 currentColor;
8483
}
8584
.ld-loader {
8685
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: 28 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,8 @@
1+
/*
2+
with old method, spinner will shift when rotating if font-size contains floating point ( such as 22.5px ).
3+
here we use 2em in width and height, scaling back to 1em with transform: scale(.5) to prevent this effect.
4+
*/
5+
16
.ld-ball, .ld-ring, .ld-hourglass, .ld-loader, .ld-cross, .ld-square, .ld-pie, .ld-spinner
27
width: 1em
38
height: 1em
@@ -8,16 +13,16 @@
813
&:after
914
content: " "
1015
display: block
11-
width: 10em
12-
height: 10em
16+
width: 2em
17+
height: 2em
1318
box-sizing: border-box
1419
transform-origin: 0em 0em
15-
transform: translateZ(0) scale(0.1)
20+
transform: translateZ(0) scale(.5)
1621
backface-visibility: hidden
1722

1823
.ld-ring:after
1924
border-radius: 50%
20-
border: 1.5em solid currentColor
25+
border: .3em solid currentColor
2126
border-left-color: transparent
2227

2328
.ld-ball:after
@@ -26,55 +31,53 @@
2631

2732
.ld-hourglass:after
2833
border-radius: 50%
29-
border: 5em solid currentColor
34+
border: 1em solid currentColor
3035
border-left-color: transparent
3136
border-right-color: transparent
3237

3338
.ld-cross:after
3439
position: absolute
35-
height: 2.5em
36-
transform: translateZ(0) scale(0.1) translate(0,3.5em)
40+
height: .5em
41+
transform: translateZ(0) scale(.5) translate(0,.75em)
3742
background: currentColor
3843

3944
.ld-cross:before
4045
content: " "
4146
display: block
42-
width: 10em
43-
height: 10em
47+
width: .5em
48+
height: 2em
4449
box-sizing: border-box
4550
transform-origin: 0em 0em
46-
transform: translateZ(0) scale(0.1)
4751
backface-visibility: hidden
4852
position: absolute
49-
width: 2.5em
50-
transform: translateZ(0) scale(0.1) translate(3.5em,0)
53+
width: .5em
54+
transform: translateZ(0) scale(.5) translate(.75em,0)
5155
background: currentColor
5256

53-
5457
.ld-square:after
5558
background: currentColor
5659

5760
.ld-pie:after
5861
border-radius: 50%
59-
border: 5em solid currentColor
62+
border: 1em solid currentColor
6063
border-left-color: transparent
6164

6265
.ld-spinner:after
6366
position: absolute
64-
width: 2em
65-
height: 2em
66-
transform: translateZ(0) scale(0.1) translate(4em, 4em)
67+
width: 0.4em
68+
height: 0.4em
69+
transform: translateZ(0) scale(.5) translate(.8em, .8em)
6770
border-radius: 50%
6871
background: none
6972
box-shadow: unquote(join(',',
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'
73+
'0 1em 0 currentColor',
74+
'0 -1em 0 currentColor',
75+
'1em 0 0 currentColor',
76+
'-1em 0 0 currentColor',
77+
'.70710678em .70710678em 0 currentColor',
78+
'-.70710678em .70710678em 0 currentColor',
79+
'.70710678em -.70710678em 0 currentColor',
80+
'-.70710678em -.70710678em 0 currentColor'
7881
))
7982

8083
.ld-loader

0 commit comments

Comments
 (0)