10.2K ·GitHub
What is this?
A collection of loading animations written entirely in CSS — you add a class to an element and get a spinner, with no images or JavaScript needed for the animation itself.
A collection of loading animations written entirely in CSS — you add a class to an element and get a spinner, with no images or JavaScript needed for the animation itself.Is it a JavaScript library or just a stylesheet?Just a stylesheet — loaders.min.css contains every animation, one class each, with no JavaScript framework involved. The animations are pure CSS, no images.
Just a stylesheet — loaders.min.css contains every animation, one class each, with no JavaScript framework involved. The animations are pure CSS, no images.How do I add a loader to my page?Include loaders.min.css, create an element and add the animation's class, then insert the required number of child divs inside that element.
Include loaders.min.css, create an element and add the animation's class, then insert the required number of child divs inside that element.Do I need jQuery for this to work?No — the stylesheet alone works in plain HTML. An optional jQuery helper (loaders.css.js) injects the right divs and can initialise loaders added after page load; a Gulp setup is only needed to contribute new animations.
No — the stylesheet alone works in plain HTML. An optional jQuery helper (loaders.css.js) injects the right divs and can initialise loaders added after page load; a Gulp setup is only needed to contribute new animations.Does it work in every browser?All recent major browsers are supported, back to IE9 (checked on IE 11, Firefox 36, Chrome 41 and Safari 8). One catch: the CSS is not run through autoprefixer.
All recent major browsers are supported, back to IE9 (checked on IE 11, Firefox 36, Chrome 41 and Safari 8). One catch: the CSS is not run through autoprefixer.What makes the animations performance-focused?Each animation only touches a small subset of CSS properties, so the browser avoids expensive painting and layout calculations while the loader loops.
Each animation only touches a small subset of CSS properties, so the browser avoids expensive painting and layout calculations while the loader loops.Are there versions for React, Vue, Angular or mobile?Yes, the community has ported it: a React demo, vue-loaders components, Angular directives, the ember-cli-loaders addon for Ember, plus iOS and Android libraries.
Yes, the community has ported it: a React demo, vue-loaders components, Angular directives, the ember-cli-loaders addon for Ember, plus iOS and Android libraries.Can I add my own animation to the collection?Yes — create a file in src/animations, load it in src/loader.scss, run gulp with the coffee-script register flag, and open demo/demo.html to preview it.
Yes — create a file in src/animations, load it in src/loader.scss, run gulp with the coffee-script register flag, and open demo/demo.html to preview it.What are similar projects?card, SpinKit, skrollr, snabbdom, simplefolio, anime, velocity, Effeckt.css
card, SpinKit, skrollr, snabbdom, simplefolio, anime, velocity, Effeckt.cssWhich topics is it in?scss, lightweight, animation, css, ui, web-development, performance, frontend, library, web, mit, open-source
scss, lightweight, animation, css, ui, web-development, performance, frontend, library, web, mit, open-source