前端前端开源项目

Loaders.css – 纯 CSS 打造的免费开源加载动画,丝滑流畅高性能!

Loaders.css 是一个性能出色的 web 前端代码库,或者叫 CSS 库,因为它完全没有用到一行 js 代码或者图片,仅仅利用纯 CSS 就实现多种样式的 loading 动画,运行流畅丝滑,轻量小...

标签:
Loaders.css - 纯 CSS 打造的免费开源加载动画,丝滑流畅高性能!

一个 CSS3 loading 动画库,简单易用,动画流畅,无论是学习还是使用,都很不错。

关于 Loaders.css

Loaders.css 是一个性能出色的 ,或者叫 库,因为它完全没有用到一行 js 代码或者图片,仅仅利用纯 CSS 就实现多种样式的 loading ,运行流畅丝滑,轻量小巧,性能优秀。

Loaders.css - 纯 CSS 打造的免费开源加载动画,丝滑流畅高性能! loaders-css 官网

Loaders.css 技术特性

  • 纯 实现,没有多余的代码,唯一的依赖就是浏览器,非常轻量
  • 性能出众,相比于用 javascript 计算绘图和布局来实现 loading,Loaders.css 使用的是 CSS3 的动画属性和 transform 变形,能极大地利用电脑或手机的图形硬件性能,所以极为流畅
  • 提供将近 30 个不同样式的 loading 动画,复制粘贴拿来就可以用

Loaders.css - 纯 CSS 打造的免费开源加载动画,丝滑流畅高性能! loading 效果预览

多年使用体验和感受

loading 动画是前端开发收到的频次很高的需求,特别是前后端分离的开发模式,数据都是异步加载的。以前做 loading 都是一张 菊花.gif 走天下, 但现在产品开发要求变高,咱们的追求也变高了,特别是移动端,显示加载动画前还得加载一个动图,这早就 out 了。

直到发现了 Loaders.css,为这些年来上千次的 loading 实现节省了大量的时间和精力。虽然官方支持 npm 安装和 jQuery 的方式引入,但我更建议面对要求不高的场景,直接复制对应的动画样式即可,不需要引入 CSS,这是极致的按需取用。

Loaders.css - 纯 CSS 打造的免费开源加载动画,丝滑流畅高性能! 使用开发者工具查看代码

面对外观要求的加载场景,我们可以修改 CSS 属性来达到精准定制的要求来符合产品的调性,无论是移动端还是 pc 端都非常好用,而且也是一个很好的 CSS3 动画学习研究对象。

得益于 Loaders.css 毫无依赖\高性能\轻量化\免费开源的特点,开发者们又陆续根据 Loaders.css 构建了用于其他技术平台甚至是 iOS \ android 原生的动画库:

  • React 版本:
  • Vue 版本:
  • Angular 版本:
  • ember 版本:
  • iOS 版本:
  • Android 版本:

免费开源说明

Loaders.css 是一个免费开源的前端 动画库,基于 托管在 Github 上,任何人和商业机构都可以免费下载使用。

Loaders.css 官网在国内访问不太稳定,经常有打不开的情况,大家也可以直接访问 Loaders.css 的 获取源码。

相关导航