Loaders.CSS 纯代码加载过度动画合集

Question

Loaders.CSS是一个完全由CSS撰写的各种加载动画合集，不需要任何的背景或者图片，而且运行流畅，拥有多种不同风格和方式的动画效果，非常创意的Loading加载动画合集。

Loaders.CSS 是一个为性能优化的实现加载动画效果的 CSS 框架，一个完全由 CSS 编写的加载动画集合，使用 CSS 属性避免浪费多余的计算和绘画。

通过 npm 或者 bower 安装

bower install loaders.css
npm i --save-dev loaders.css

使用方法

标准用法

1. 首先需要从Github上下载 Loaders.CSS 的压缩包。
2. 在网页的头部（一般而言）引入 loaders.min.css 文件。
3. 创建一个元素，然后给这个元素添加一定的Class类，例如<div class="loader-inner ball-pulse"></div>。
4. Loaders.CSS会自动在这个DIV中插入适量的DIV子元素，并赋予他们动画效果。

jQuery（可选）

1. 引入loaders.min.css、jQuery 和 loaders.css.js 文件。
2. 创建一个元素，然后给这个元素添加一定的 Class 类，例如 <div class="loader-inner ball-pulse"></div>。
3. loaders.css.js 是把每个动画的DIV元素正确数量的一个简单的辅助。

自定义背景颜色

添加样式到需要修改的 div 样式中。

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

浏览器兼容

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.

相关链接

• GitHub地址：https://github.com/ConnorAtherton/loaders.css
• 软件首页：https://connoratherton.com/loaders
• 在线实例：/wp-content/uploads/2019/01/Loader.CSS/index.html