Skip to content

Commit 4137d09

Browse files
zbryiktzbryikt
committed
- fix build-css
 - add lite build: include only 7 pure css loader ( shape + animation ) listed in document page.
1 parent d4db9e4 commit 4137d09

5 files changed

Lines changed: 116 additions & 1 deletion

File tree

‎CHANGELOG.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
11
# Change Logs
22

3+
## v3.1.0
4+
5+
- fix build-css
6+
- add lite build: include only 7 pure css loader ( shape + animation ) listed in document page.
7+
8+
39
## v3.0.0
410

511
- release with compact directory structure

‎build‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,13 @@ cat dist/shape.css dist/ctrl.css > dist/loading.utils.css
1515
echo "minifying loading.css / loading.utils.css ..."
1616
./node_modules/.bin/uglifycss dist/loading.css > dist/loading.min.css
1717
./node_modules/.bin/uglifycss dist/loading.utils.css > dist/loading.utils.min.css
18+
19+
echo "merge css files into lite.css ..."
20+
cat dist/shape.css dist/lite.css > dist/lite-bundle.css
21+
mv dist/lite-bundle.css dist/lite.css
22+
echo "minifying lite.css ..."
23+
./node_modules/.bin/uglifycss dist/lite.css > dist/lite.min.css
24+
1825
echo "zipping..."
1926
zip -r dist/loading-css.zip dist/loading.min.css dist/loading.utils.min.css
2027
echo "clean up intermediate files..."

‎dist/lite.css‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
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+
.ld-ball,
6+
.ld-ring,
7+
.ld-hourglass,
8+
.ld-loader,
9+
.ld-cross,
10+
.ld-square,
11+
.ld-pie,
12+
.ld-spinner {
13+
width: 1em;
14+
height: 1em;
15+
position: relative;
16+
color: inherit;
17+
display: inline-block;
18+
box-sizing: content-box;
19+
}
20+
.ld-ball:after,
21+
.ld-ring:after,
22+
.ld-hourglass:after,
23+
.ld-loader:after,
24+
.ld-cross:after,
25+
.ld-square:after,
26+
.ld-pie:after,
27+
.ld-spinner:after {
28+
content: " ";
29+
display: block;
30+
width: 2em;
31+
height: 2em;
32+
box-sizing: border-box;
33+
transform-origin: 0em 0em;
34+
transform: translateZ(0) scale(0.5);
35+
backface-visibility: hidden;
36+
}
37+
.ld-ring:after {
38+
border-radius: 50%;
39+
border: 0.3em solid currentColor;
40+
border-left-color: transparent;
41+
}
42+
.ld-ball:after {
43+
border-radius: 50%;
44+
background: currentColor;
45+
}
46+
.ld-hourglass:after {
47+
border-radius: 50%;
48+
border: 1em solid currentColor;
49+
border-left-color: transparent;
50+
border-right-color: transparent;
51+
}
52+
.ld-cross:after {
53+
position: absolute;
54+
height: 0.5em;
55+
transform: translateZ(0) scale(0.5) translate(0, 0.75em);
56+
background: currentColor;
57+
}
58+
.ld-cross:before {
59+
content: " ";
60+
display: block;
61+
width: 0.5em;
62+
height: 2em;
63+
box-sizing: border-box;
64+
transform-origin: 0em 0em;
65+
backface-visibility: hidden;
66+
position: absolute;
67+
width: 0.5em;
68+
transform: translateZ(0) scale(0.5) translate(0.75em, 0);
69+
background: currentColor;
70+
}
71+
.ld-square:after {
72+
background: currentColor;
73+
}
74+
.ld-pie:after {
75+
border-radius: 50%;
76+
border: 1em solid currentColor;
77+
border-left-color: transparent;
78+
}
79+
.ld-spinner:after {
80+
position: absolute;
81+
width: 0.4em;
82+
height: 0.4em;
83+
transform: translateZ(0) scale(0.5) translate(0.8em, 0.8em);
84+
border-radius: 50%;
85+
background: none;
86+
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;
87+
}
88+
.ld-loader {
89+
background-size: cover;
90+
}
91+
.tool/build-css.ls { transform-origin: 50% 50%; transform-box: fill-box; }

‎dist/lite.min.css‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎tool/build-css.ls‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
require! <[fs fs-extra anikit uglifycss]>
1+
require! <[fs fs-extra anikit/src/anikit.ls uglifycss]>
22

33
prefix = process.argv.2 or 'ld'
44
dir = process.argv.3 or 'dist'
@@ -14,6 +14,7 @@ alias = do
1414

1515
custom = JSON.parse(fs.read-file-sync 'src/config.json' .toString!)
1616
all = [".#{prefix} { transform-origin: 50% 50%; transform-box: fill-box; }"]
17+
lite = [".#{prefix} { transform-origin: 50% 50%; transform-box: fill-box; }"]
1718
console.log "prepare dist folder ... "
1819
fs-extra.ensure-dir-sync "#dir/entries"
1920

@@ -28,6 +29,7 @@ for k,v of anikit.types =>
2829
{name: k, prefix, alias: if alias[k] => ([k] ++ alias[k]) else null}
2930
)
3031
all.push cls
32+
if k in <[ld-flip-h ld-spin ld-cycle ld-tick ld-spin-fast ld-clock ld-rubber-h]> => lite.push cls
3133
css = """
3234
#{all.0}
3335
#cls
@@ -44,3 +46,11 @@ fs.write-file-sync "#dir/loading.css", css
4446
console.log "generating #dir/loading.min.css ..."
4547
css-min = uglifycss.processString css
4648
fs.write-file-sync "#dir/loading.min.css", css-min
49+
50+
console.log "generating #dir/lite.css ..."
51+
css = lite.join(\\n)
52+
fs.write-file-sync "#dir/lite.css", css
53+
54+
console.log "generating #dir/lite.min.css ..."
55+
css-min = uglifycss.processString css
56+
fs.write-file-sync "#dir/lite.min.css", css-min

0 commit comments

Comments
 (0)