2023-05-12 开启多语言插件支持……

loaders.css使用纯粹的css实现的开源loading动画库

Css 苏 demo 3120℃
loaders.css是Github上一个使用纯粹的css实现的开源loading动画库,完全用CSS编写的加载动画的集合。每个动画仅限于CSS属性的一小部分,以避免复杂的绘画和布局计算。

访问地址:

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

安装方式:

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

使用方法:

1.包裹文件 2.使用 ,示例:<div class=”loader-inner ball-pulse”></div> 3.将适当数量的<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())

更改背景色:

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

更改尺寸:

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

兼容性:

  • IE11
  • Chrome 41+
  • FireFox 36+
  • Safari 8+
打赏

转载请注明:苏demo的别样人生 » loaders.css使用纯粹的css实现的开源loading动画库

   如果本篇文章对您有帮助,欢迎向博主进行赞助,赞助时请写上您的用户名。
支付宝直接捐助帐号oracle_lee@qq.com 感谢支持!
喜欢 (17)or分享 (0)