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

  • Z时代
  • 2024-01-10
  • 分类：IT

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 11Firefox 36Chrome 41Safari 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

以上是 Loaders.CSS 纯代码加载过度动画合集 的全部内容， 来源链接： utcz.com/p/232162.html

回到顶部