`s into that element\n\n##### jQuery (optional)\n- Include `loaders.min.css`, jQuery, and `loaders.css.js`\n- Create an element and add the animation class (e.g. `
`)\n- `loaders.js` is a simple helper to inject the correct number of div elements for each animation\n- To initialise loaders that are added after page load select the div and call `loaders` on them (e.g. `$('.loader-inner').loaders()`)\n- Enjoy\n\n### Customising\n\n##### Changing the background color\n\nAdd styles to the correct child `div` elements\n\n``` css\n.ball-grid-pulse > div {\n background: orange;\n}\n```\n\n### Browser support\n\nCheck the [can I use](http://caniuse.com/#search=css-animation) [tables](http://caniuse.com/#search=css-transform).\nAll recent versions of the major browsers are supported and it has support back to IE9.\n\nNote: The loaders aren't run through autoprefixer, see this [issue](https://github.com/ConnorAtherton/loaders.css/issues/18).\n\nIE 11 | Firefox 36 | Chrome 41 | Safari 8\n------ | ---------- | --------- | --------\nā | ā | ā | ā\n\n### Contributing\n\nPull requests are welcome! Create another file in `src/animations`\nand load it in `src/loader.scss`.\n\nIn a separate tab run `gulp --require coffee-script/register`. Open `demo/demo.html`\nin a browser to see your animation running.\n\n### Further research\n\n- http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/\n- http://aerotwist.com/blog/pixels-are-expensive/\n- http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/\n- http://frontendbabel.info/articles/webpage-rendering-101/\n\n### Inspired by loaders.css\n\nA few other folks have taken loaders and ported them elsewhere.\n\n- **React** - [Jon Jaques](https://github.com/jonjaques) built a React demo you can check out [here](https://github.com/jonjaques/react-loaders)\n- **Angular** - [the-corman](https://github.com/the-cormoran/angular-loaders) created some directives for angular, as did [Masadow](https://github.com/Masadow) in [this pr](https://github.com/ConnorAtherton/loaders.css/pull/50)\n- **iOS** - [ninjaprox](https://github.com/ninjaprox/NVActivityIndicatorView) and [ontovnik](https://github.com/gontovnik/DGActivityIndicatorView)\n- **Android** - [Jack Wang](https://github.com/81813780/AVLoadingIndicatorView) created a library and [technofreaky](https://github.com/technofreaky/Loaders.CSS-Android-App) created an app\n\n### Licence\n\nThe MIT License (MIT)\n\nCopyright (c) 2015 Connor Atherton\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n","maintainers":[{"name":"connoratherton","email":"c.liam.atherton@gmail.com"}],"time":{"modified":"2022-06-19T13:14:04.127Z","created":"2015-03-27T15:16:33.062Z","0.0.2":"2015-03-27T15:16:33.062Z","0.1.0":"2015-04-03T06:30:09.319Z","0.1.1":"2015-04-20T01:34:18.355Z","0.1.2":"2016-01-13T06:57:50.109Z"},"homepage":"https://github.com/ConnorAtherton/loaders.css","keywords":["css","loaders","animation","animate"],"repository":{"type":"git","url":"git+ssh://git@github.com/ConnorAtherton/loaders.css.git"},"author":{"name":"Connor Atherton"},"bugs":{"url":"https://github.com/ConnorAtherton/loaders.css/issues"},"license":"MIT","readmeFilename":"README.md","users":{"filipve":true,"uptonking":true,"nsxz":true,"marcovossen":true}}
![](\"https://img.shields.io/npm/v/loaders.css.svg?style=flat-square\")
\n ![](\"https://img.shields.io/bower/v/loaders.css.svg?style=flat-square\")
\n