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

Vedu • 2021-09-10 06:56 • 界面设计 • 阅读 982

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

关于 Loaders.css

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

loaders-css 官网

Loaders.css 技术特性

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

loading 效果预览

多年使用体验和感受

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

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

使用开发者工具查看代码

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

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

React 版本：react-loaders
Vue 版本：vue-loaders
Angular 版本：Masadow
ember 版本：ember-cli-loaders
iOS 版本：DGActivityIndicatorView
Android 版本：Loaders.CSS-Android-App

免费开源说明

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

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

内容出处：，

声明：本网站所收集的部分公开资料来源于互联网，转载的目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品，请与我们取得联系，我们会及时修改或删除。文章链接：http://www.yixao.com/surface/28966.html

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

关于 Loaders.css

Loaders.css 技术特性

多年使用体验和感受

免费开源说明

相关推荐

发表评论