README.md

这里只显示每个文件的开头 60 行。登录后可以解锁完整代码。

微信扫码关注公众号，代码整理好后第一时间通知你。

<h1 align="center">Loaders.css</h1>

<p align="center">
  <img src="https://img.shields.io/npm/v/loaders.css.svg?style=flat-square">
  <img src="https://img.shields.io/bower/v/loaders.css.svg?style=flat-square">
</p>

Delightful and performance-focused pure css loading animations.

### What is this?

[See the demo](http://connoratherton.com/loaders)

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-dev loaders.css
```

### Usage

##### Standard
- Include `loaders.min.css`
- Create an element and add the animation class (e.g. `<div class="loader-inner ball-pulse"></div>`)
- Insert the appropriate number of `<div>`s into that element

##### jQuery (optional)
- Include `loaders.min.css`, jQuery, and `loaders.css.js`
- Create an element and add the animation class (e.g. `<div class="loader-inner ball-pulse"></div>`)
- `loaders.js` is a simple helper to inject the correct number of div elements for each animation
- To initialise loaders that are added after page load select the div and call `loaders` on them (e.g. `$('.loader-inner').loaders()`)
- Enjoy

### Customising

##### Changing the background color

Add styles to the correct child `div` elements

``` css
.ball-grid-pulse > div {
  background: orange;
}
```

### Browser support

Check the [can I use](http://caniuse.com/#search=css-animation) [tables](http://caniuse.com/#search=css-transform).
All recent versions of the major browsers are supported and it has support back to IE9.