diff --git a/CHANGELOG.md b/CHANGELOG.md new file mode 100644 index 0000000..1f556ff --- /dev/null +++ b/CHANGELOG.md @@ -0,0 +1,11 @@ +# Change Logs + +# v2.0.0 + + - rename `css-spinner` to `@loadingio/css-spinner` since the old name conflicts. + - correct box-sizing model in every spinner + - fix ripple and heart spinner alignment + - add mixin.pug + - use currentColor for spinner color + - add `style` field in package.json + - support attributes in mixin diff --git a/README.md b/README.md index a846130..dbca5b8 100644 --- a/README.md +++ b/README.md @@ -1,72 +1,58 @@ -# CSS-Spinner +# css-spinner [Live Demo](https://loading.io/css/) -collection of 12 small, elegant pure css spinners for your website loading animation. +Collection of 12 small, elegant pure css spinners for your website's loading animation. -![css spinner](https://github.com/loadingio/css-spinner/blob/master/thumbnail.gif?raw=true) +![css spinner](https://raw.githubusercontent.com/loadingio/css-spinner/master/web/static/thumbnail.gif) ## Features * vanilla - no external dependency and no additional library required. * standalone - use any of them separately. - * customizable - use Stylus variables to quickly customize them to fit your need. - * easy to use - simple as copy and paste while also simple to use with pug mixins. + * customizable - use Stylus variables to quickly customize them to fit your needs. + * easy to use - simply copy & paste while also easy to use with pug mixins. * small - average size 1K per spinner unminimized, unzipped ## Usage -[loading.io](https://loading.io/css/) provides a [web interface](https://loading.io/css/) to quickly choose and copy your desired spinners, yet you can still find the source code in this repository. The simplest usage is as: +[loading.io](https://loading.io/) provides a [web interface](https://loading.io/css/) to quickly choose and copy your desired spinners, yet you can still find the source code in this repository. The basic usage is as: -1. Find and download the html file of desired loader under [build/](https://github.com/loadingio/css-spinner/tree/master/build) folder. +1. Find and download the html files of desired loader under [dist](https://github.com/loadingio/css-spinner/tree/master/dist/) folder. 2. Copy its content to the place you want to use this loader. -3. Done. -Separated CSS and HTML files are also available under [build](https://github.com/loadingio/css-spinner/tree/master/build) folder so that you can reuse the css to reduce payload size. +Separated CSS and HTML files are also available under [build](https://github.com/loadingio/css-spinner/tree/master/dist/entries) folder for reusing CSS codes to reduce payload size. We also provide stylus and pug source files for better integrating these spinners into your project. Find corresponding stylus and pug files for your desired spinners under [src/](https://github.com/loadingio/css-spinner/tree/master/src) folders. -Additionally, you will need [vars.styl](https://github.com/loadingio/css-spinner/blob/master/vars.styl) and [basic.styl](https://github.com/loadingio/css-spinner/blob/master/basic.styl) if you are going to build by yourself. See following section for more detail. +To use stylus files alone, you will have to provide variables listed in [vars.styl](https://github.com/loadingio/css-spinner/blob/master/vars.styl). -## Customization +## Build -To customize speed and color of a loader, first ensure you have stylus install locally ( you will need npm too ): +You can also customize all these loaders by building them yourself. - npm install -g stylus + * First, update `vars.styl` based on your needs. + * make sure required packages are installed by `npm install`. You will need NPM / NodeJS pre-installed. + * build with this command: `npm run build` + - generated files will be in `dist/` folder. -then, edit vars.styl with your desired configuration. for now you can edit the following style of a spinner: - - * size - * color - * speed - - -once you've done with the editing, run stylus to build yourself a css file: - - stylus -o . --import vars.styl --import basic.styl src//main.styl - - -use the generated main.css together with build//main.html to add this loader in your project. - - -Browser Compatibility ----------------- +## Browser Compatibility These spinners use CSS Animation and Transformation which is widely supported by major modern browsers except IE<=9. To support older browsers like IE9, please use [loading.io](https://loading.io/animation/icon/) to generate alternative GIF Loaders instead. -License ----------------- +## License All loader files here are released under CC0 License. However, you could attribute to this link: [loading.io css spinner ( https://loading.io/css/ )](https://loading.io/css/) to give loading.io a thumbs-up. +Other source codes are released under MIT License. + -Other Resources ----------------- +## Other Resources If you want to make custom css loading animation, loading.io also provides [loading.css](https://loading.io/animation/) - A pure CSS loading animation library, and a [helper GIF builder](https://loading.io/animation/icon/). Don't forget to check it out and share your customized loader with us! diff --git a/build.ls b/build.ls new file mode 100755 index 0000000..243540b --- /dev/null +++ b/build.ls @@ -0,0 +1,53 @@ +require! <[fs fs-extra progress colors stylus pug uglifycss]> + +console.log "Build all CSS-spinners..." + +progress-bar = (total = 10, text = "converting") -> + bar = new progress( + " #text [#{':bar'.yellow}] #{':percent'.cyan} :etas", + { total: total, width: 60, complete: '#' } + ) + +spinners = fs.readdir-sync \src/ + .filter -> fs.lstat-sync "src/#it" .is-directory! + +bar = progress-bar spinners.length, "Build Spinners" +vars = fs.read-file-sync "vars.styl" .toString! +all-css = "" +all-pug = "" + +spinners.map -> + src = do + stylus: [vars, fs.read-file-sync("src/#it/index.styl").toString!].join(\\n) + pug: fs.read-file-sync "src/#it/index.pug" .toString! + css = stylus src.stylus .render! + css-min = uglifycss.processString(css, uglyComments: true) + all-css += css + html = pug.render src.pug + html-css = """ + + #html + """ + fs-extra.ensure-dir-sync "dist/entries/#it" + fs.write-file-sync "dist/entries/#it/index.css", css + fs.write-file-sync "dist/entries/#it/index.min.css", css-min + fs.write-file-sync "dist/entries/#it/index.html", html + fs.write-file-sync "dist/#it.html", html-css + mixin-pug = src.pug.replace /^([^: ]+)([: ])/, "$1&attributes(attributes)$2" + all-pug += """ + mixin lds-#it() + #{mixin-pug.split(\\n).filter(->it).map(->" #it").join(\\n)}\n + """ + bar.tick! + +all-css-min = uglifycss.processString(all-css, uglyComments: true) +fs.write-file-sync "dist/index.css", all-css +fs.write-file-sync "dist/index.min.css", all-css-min +fs.write-file-sync "dist/mixin.pug", all-pug +fs-extra.ensure-dir-sync "web/static/assets/lib/css-spinner/dev" +fs.write-file-sync "web/static/assets/lib/css-spinner/dev/index.css", all-css +fs.write-file-sync "web/static/assets/lib/css-spinner/dev/index.min.css", all-css-min +fs.write-file-sync "web/static/assets/lib/css-spinner/dev/mixin.pug", all-pug +console.log "\nFinished." diff --git a/build/circle/sample.html b/build/circle/sample.html deleted file mode 100644 index 00ca178..0000000 --- a/build/circle/sample.html +++ /dev/null @@ -1,32 +0,0 @@ - -
\ No newline at end of file diff --git a/build/default/sample.html b/build/default/sample.html deleted file mode 100644 index c2982f9..0000000 --- a/build/default/sample.html +++ /dev/null @@ -1,86 +0,0 @@ - -
\ No newline at end of file diff --git a/build/dual-ring/sample.html b/build/dual-ring/sample.html deleted file mode 100644 index b0d5a1f..0000000 --- a/build/dual-ring/sample.html +++ /dev/null @@ -1,28 +0,0 @@ - -
\ No newline at end of file diff --git a/build/ellipsis/sample.html b/build/ellipsis/sample.html deleted file mode 100644 index 120aeaf..0000000 --- a/build/ellipsis/sample.html +++ /dev/null @@ -1,59 +0,0 @@ - -
\ No newline at end of file diff --git a/build/facebook/sample.html b/build/facebook/sample.html deleted file mode 100644 index 60ff738..0000000 --- a/build/facebook/sample.html +++ /dev/null @@ -1,40 +0,0 @@ - -
\ No newline at end of file diff --git a/build/grid/sample.html b/build/grid/sample.html deleted file mode 100644 index c7b4b2a..0000000 --- a/build/grid/sample.html +++ /dev/null @@ -1,71 +0,0 @@ - -
\ No newline at end of file diff --git a/build/heart/sample.html b/build/heart/sample.html deleted file mode 100644 index 3623a98..0000000 --- a/build/heart/sample.html +++ /dev/null @@ -1,58 +0,0 @@ - -
\ No newline at end of file diff --git a/build/hourglass/sample.html b/build/hourglass/sample.html deleted file mode 100644 index 66ba0a5..0000000 --- a/build/hourglass/sample.html +++ /dev/null @@ -1,35 +0,0 @@ - -
\ No newline at end of file diff --git a/build/ring/sample.html b/build/ring/sample.html deleted file mode 100644 index 33da2cd..0000000 --- a/build/ring/sample.html +++ /dev/null @@ -1,39 +0,0 @@ - -
\ No newline at end of file diff --git a/build/ripple/sample.html b/build/ripple/sample.html deleted file mode 100644 index bd17e60..0000000 --- a/build/ripple/sample.html +++ /dev/null @@ -1,36 +0,0 @@ - -
\ No newline at end of file diff --git a/build/roller/sample.html b/build/roller/sample.html deleted file mode 100644 index 983c30d..0000000 --- a/build/roller/sample.html +++ /dev/null @@ -1,88 +0,0 @@ - -
\ No newline at end of file diff --git a/build/spinner/sample.html b/build/spinner/sample.html deleted file mode 100644 index 206451c..0000000 --- a/build/spinner/sample.html +++ /dev/null @@ -1,82 +0,0 @@ - - \ No newline at end of file diff --git a/dist/circle.html b/dist/circle.html index e991a26..347f61d 100644 --- a/dist/circle.html +++ b/dist/circle.html @@ -1,11 +1,19 @@ -
\ No newline at end of file +
\ No newline at end of file diff --git a/dist/default.html b/dist/default.html index c2982f9..8150748 100644 --- a/dist/default.html +++ b/dist/default.html @@ -1,5 +1,9 @@

CSS Spinner

by loading.io
\ No newline at end of file