您好!欢迎来到源码码网

性能出色,纯CSS实现的loading动画——Loaders.css

  • 开发工具
  • 来源:源码码网
  • 编辑:admin
  • 时间:2020-09-22 22:16
  • 阅读:434

loaders.css是Github上一个使用纯粹的css实现的开源loading动画库,完全用CSS编写的加载动画的集合。每个动画仅限于CSS属性的一小部分,以避免复杂的绘画和布局计算。下面这张图是在demo页面截取的Gif效果图,可供参考!

Loaders.css


Github

就这样一个小小的库也收获了9.5k的stars,以下是其仓库源地址

https://github.com/ConnorAtherton/loaders.css

安装方式

自由选择安装方式进行安装使用

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

用法

1、标准用法

  • 包括 loaders.min.css

  • 创建一个元素并添加动画类(例如<div class="loader-inner ball-pulse"></div>)

  • 将适当数量的<div>s插入该元素

jQuery(可选)

  • 包括loaders.min.css,jQuery和loaders.css.js

  • 创建一个元素并添加动画类(例如<div class="loader-inner ball-pulse"></div>)

  • loaders.js 是为每个动画注入正确数量的div元素的简单帮助库

  • 要初始化页面加载后添加的加载器,请选择div并调用loaders它们(例如$('.loader-inner').loaders())

  • enjoy it!

定制化

  • 更改背景颜色

将样式添加到正确的子div元素

.ball-grid-pulse > div {
 background-color: orange;
}
  • 更改尺寸大小

使用2D比例转换

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

浏览器兼容性

  • IE11

  • Chrome 41+

  • FireFox 36+

  • Safari 8+

衍生产物

Loaders.css衍生了很多适用于其它平台或框架的优秀库,这些都是受Loaders.css的启发而产生的

  • React

https://github.com/jonjaques/react-loaders

  • Vue

https://github.com/Hokid/vue-loaders

  • Angular

https://github.com/Masadow

  • ember

https://github.com/kaermorchen/ember-cli-loaders

  • iOS

https://github.com/gontovnik/DGActivityIndicatorView

  • Android

https://github.com/varunsridharan/Loaders.CSS-Android-App

总结

Loaders.css是一个非常出色的loading动画库,可以将它运用到你任何新的或者现有的项目中,性能出众,定制化,enjoy it!

Loaders.css

特别声明:
1、如无特殊说明,内容均为本站原创发布,转载请注明出处;
2、部分转载文章已注明出处,转载目的为学习和交流,如有侵犯,请联系客服删除;
3、编辑非《源码码网》的文章均由用户编辑发布,不代表本站立场,如涉及侵犯,请联系删除;
全部评论(0)
推荐阅读
  • css中rel的属性值都有哪些,分别代表什么意思
  • css中rel的属性值都有哪些,分别代表什么意思
  • 在HTML中,元素的rel属性用于定义当前文档与被链接文档之间的关系。这个属性在CSS的上下文中经常与样式表关联,但rel属性的用途远不止于此。以下是一些常见的rel属性值及其意义:1、stylesheet:表示被链接的文档是一个样式表。这通常用于链接CSS文件。
  • 源码教程
  • 来源:源码码网
  • 编辑:源码码网
  • 时间:2024-03-28 12:28
  • 阅读:202
  • css中的z-index是什么意思,如何使用?
  • css中的z-index是什么意思,如何使用?
  • z-index是CSS属性,用于控制元素在页面中的层叠顺序。z-index的值决定了元素在垂直层面上的显示顺序,具有较高z-index值的元素会覆盖具有较低z-index值的元素。默认情况下,元素的z-index值是auto,这意味着元素的层叠顺序由其在文档流中的位置决定。在没有使用定位属性的情况下,后面出现的元素会覆盖前面出现的元素。
  • 源码教程
  • 来源:源码码网
  • 编辑:源码码网
  • 时间:2024-03-28 11:34
  • 阅读:20
  • PHP开发五种数据打印方式举例说明
  • PHP开发五种数据打印方式举例说明
  • 在PHP中,有几种常用的打印方式,包括:1、echo:用于输出一个或多个字符串。它是PHP语句,不是函数,因此没有返回值。例如:echo ”Hello, World!”; // 输出 ”Hello, World!”2、print:用于输出一个字符串。它需要一个参数,并需要使用圆括号。print函数在输出后有返回值,如果执行失败则返回f
  • 源码教程
  • 来源:源码码网
  • 编辑:源码码网
  • 时间:2024-01-18 23:09
  • 阅读:318
  • php开发判断字符串是否相等的方法
  • php开发判断字符串是否相等的方法
  • 本文介绍php开发中常用的字符串比较的方法,以PHP7.4为例,可以使用双等号,strcmp()方法,strcasemp()方法、strncasecmp()方法以及ctrncmp()方法,等进行判断,下边以”==”和strcmp()方法为例进行举例:// 定义插入的数据$data = [    ”name” &
  • 源码教程
  • 来源:源码码网
  • 编辑:源码码网
  • 时间:2024-01-18 21:04
  • 阅读:238
  • thinkphp6 No input file specified解决办法
  • thinkphp6 No input file specified解决办法
  • thinkphp6出现Noinputfilespecified错误基本上都是因为访问路径出错引起的,解决办法也很简单,打开public目录下的的.htaccess文件,对伪静态规则进行编辑,将:把:RewriteRule ^(.*)$ index.php/$1 [QSA,PT,L]改为:RewriteRule ^(.*)$ index.php [L,E=PATH_I
  • 源码教程
  • 来源:源码码网
  • 编辑:源码码网
  • 时间:2024-01-17 20:24
  • 阅读:152
联系客服
源码代售 源码咨询 素材咨询 联系客服
029-84538663
手机版

扫一扫进手机版
返回顶部