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

发布于 2019-06-08 字数 2947 浏览 863 评论 0

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

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

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.

相关链接

如果你对这篇文章有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助。

扫码二维码加入Web技术交流群

您暂时不能评论!

管理员开启了需要登录才能够评论,你可以免费注册一个本站的账号。

还没有评论!

目前还没有任何评论,快来抢沙发吧!