loaders.css README

The project's README from github.com/ConnorAtherton/loaders.css. As one markdown file: README.md.

Loaders.css

Delightful and performance-focused pure css loading animations.

What is this?

See the demo

A collection of loading animations written entirely in css. Each animation is limited to a small subset of css properties in order to avoid expensive painting and layout calculations.

I've posted links below to some fantastic articles that go into this in a lot more detail.

Install

bower install loaders.css

npm i --save loaders.css

Usage

Standard
jQuery (optional)

Customising

Changing the background color

Add styles to the correct child div elements

.ball-grid-pulse > div {
  background-color: orange;
}
Changing the loader size

Use a 2D Scale transform

.loader-small .loader-inner {
  transform: scale(0.5, 0.5);
}

Browser support

Check the can I use tables. All recent versions of the major browsers are supported and it has support back to IE9.

Note: The loaders aren't run through autoprefixer, see this issue.

IE 11 Firefox 36 Chrome 41 Safari 8
✔ ✔ ✔ ✔

Contributing

Pull requests are welcome! Create another file in src/animations and load it in src/loader.scss.

In a separate tab run gulp --require coffee-script/register. Open demo/demo.html in a browser to see your animation running.

Further research

Inspired by loaders.css

A few other folks have taken loaders and ported them elsewhere.

Licence

The MIT License (MIT)

Copyright (c) 2016 Connor Atherton

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

loaders.css (ConnorAtherton/loaders.css)

Searching Database…

10.2K ·GitHub
Loaders.css
这是什么？一套完全用 CSS 编写的加载动画集合——只要给元素加一个类，就能得到一个加载动画（spinner），动画本身不需要任何图片或 JavaScript。
它是一个 JavaScript 库，还是只是一个样式表？只是一个样式表——loaders.min.css 包含了所有动画，每个动画对应一个类，不涉及任何 JavaScript 框架。动画是纯 CSS 的，不使用图片。
我怎么在页面里加一个加载动画？引入 loaders.min.css，创建一个元素并加上对应动画的类，然后在这个元素内部插入所需数量的子 div。
我需要 jQuery 才能用它吗？不需要——只用这个样式表在纯 HTML 中就能工作。可选的 jQuery 辅助工具（loaders.css.js）会自动注入所需的 div，还能初始化页面加载后才添加的加载动画；Gulp 配置只有在想贡献新动画时才需要。
所有浏览器都能用吗？支持所有较新的主流浏览器，最低到 IE9（在 IE 11、Firefox 36、Chrome 41 和 Safari 8 上验证过）。有一点要注意：这些 CSS 没有经过 autoprefixer 处理。
为什么说这些动画注重性能？每个动画只涉及一小部分 CSS 属性，所以在加载动画循环播放时，浏览器可以避免开销很大的绘制和布局计算。
有没有 React、Vue、Angular 或移动端的版本？有，社区已经做了移植：React 演示、vue-loaders 组件、Angular 指令、Ember 的 ember-cli-loaders 插件，还有 iOS 和 Android 库。
我可以往这个集合里添加自己的动画吗？可以——在 src/animations 里创建一个文件，在 src/loader.scss 中引入它，运行 gulp 并带上 coffee-script 注册参数，然后打开 demo/demo.html 预览效果。
What are similar projects?card, SpinKit, skrollr, snabbdom, simplefolio, anime, velocity, Effeckt.css
Which topics is it in?scss, lightweight, animation, css, ui, web-development, performance, frontend, library, web, mit, open-source
Creator
ConnorAtherton
Size
0.3 MB
Stars
10.2K
Updated
CommitJun 13
Age
11y
Commits · 90 Days