add a separated file loading.utils.css

Author: zbryikt

build

@@ -8,12 +8,14 @@ echo "build src/shape.styl -> dist/shape.css ..."
 echo "build animations..."
 ./node_modules/.bin/lsc tool/build-css.ls > dist/main.css
 
-echo "merge css files into loading.css..."
+echo "merge css files into loading.css / loading.utils.css ..."
 cat dist/shape.css dist/ctrl.css dist/main.css > dist/loading.css
-echo "minifying loading.css ..."
+cat dist/shape.css dist/ctrl.css > dist/loading.utils.css
+echo "minifying loading.css / loading.utils.css ..."
 ./node_modules/.bin/uglifycss dist/loading.css > dist/loading.min.css
+./node_modules/.bin/uglifycss dist/loading.utils.css > dist/loading.utils.min.css
 echo "zipping..."
-zip -r dist/loading-css.zip dist/loading.min.css
+zip -r dist/loading-css.zip dist/loading.min.css dist/loading.utils.min.css
 echo "clean up intermediate files..."
 rm dist/ctrl.css dist/shape.css dist/main.css
 

dist/loading-css.zip

@@ -0,0 +1,86 @@
+.ld-ball,
+.ld-ring,
+.ld-hourglass,
+.ld-loader,
+.ld-cross,
+.ld-square,
+.ld-pie,
+.ld-spinner {
+  width: 1em;
+  height: 1em;
+  position: relative;
+  color: inherit;
+  display: inline-block;
+}
+.ld-ball:after,
+.ld-ring:after,
+.ld-hourglass:after,
+.ld-loader:after,
+.ld-cross:after,
+.ld-square:after,
+.ld-pie:after,
+.ld-spinner:after {
+  position: absolute;
+  margin: auto;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  content: " ";
+  display: inline-block;
+  background: center center no-repeat;
+  background-size: cover;
+}
+.ld-ball:after {
+  border-radius: 50%;
+  background: currentColor;
+}
+.ld-pie:after {
+  width: 0;
+  height: 0;
+  border-radius: 50%;
+  border-style: solid;
+  border-width: 0.5em;
+  -webkit-background-clip: padding-box;
+  border-color: currentColor currentColor currentColor transparent;
+}
+.ld-ring:after {
+  border-radius: 50%;
+  border-style: solid;
+  border-width: 0.15em;
+  -webkit-background-clip: padding-box;
+  border-color: currentColor currentColor currentColor transparent;
+  box-sizing: border-box;
+}
+.ld-hourglass:after {
+  width: 0;
+  height: 0;
+  background: none;
+  border-radius: 50%;
+  border-style: solid;
+  border-width: 0.5em;
+  border-color: currentColor transparent currentColor transparent;
+}
+.ld-cross:after {
+  width: 18%;
+  height: 18%;
+  background: currentColor;
+  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;
+}
+.ld-square:after {
+  width: 90%;
+  height: 90%;
+  background: currentColor;
+}
+.ld-spinner:after {
+  width: 20%;
+  height: 20%;
+  border-radius: 50%;
+  background: none;
+  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;
+}
+.ld-loader {
+  background-size: cover;
+}