一个 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
微信扫一扫
支付宝扫一扫
相关推荐
-
最流行的5个前端框架对比
如今出现了大量的CSS前端框架，但真正优秀的框架只有少数几个。 本文将会比较其中五个最佳的框架。每个框架都有自己的优点和缺点，以及具体的应用领域，你可以根据自己的具体项目需求进行选…
-
网站建设的界面内容优化
谓产品其实最终展现在用户面前的只是界面而已，所谓界面绝大多数时候只包括两个部分：图片、文字。重视界面上的每一个像素和每一个文字是UED的基本素质，关于如何设计好界面上的文字（一般在UED里面我们把这个职位叫做“内容优化”）我以前写过创业团队的界面文字优化和用户在每个情景中的角色感，这一期的话题中其他伙伴也说到了很多。
-
Web产品设计的适配方法
如何为一款产品制定合适的界面规则？随着产品的迭代更新，作为设计师，则更需要在了解产品特性的情况下、设计出合理且有效的界面布局。本篇文章里，作者就对web产品设计适配选型做出介绍，并…
-
一位软装设计从业者的 iPad 工作流
iPad 是否能作为效率之用，要视乎你的工种或者工作模式，或者说想不想。 我是一个软装设计从业者，分管项目创作与产品生产。iPad 从 3 年前开始介入我的工作，经历了 iPad …
-
所有的动效设计几乎都是这14个软件做出来的
随着UI设计的不断发展，UI动效越来越多的被应用于实际的生活中。手机、iPad、电脑、网页等各设备都在大范围应用，那么问题就来了，为什么UI动效越来越被广泛应用？它有哪些优势呢？有…
-
从百度知道改版看网站制作发展方向
刚刚到百度知道看了看，突然发现很不适应。原来是百度知道页面整体剧中了，你还别说，还真有点不适应……百度知道为什么突然之间改变多年的习惯，一下子剧中了呢？这里是不是蕴含着什么秘密？我们大家一起来大胆的猜想一下，纯粹猜想，如果您不屑一顾，那么就当作一次笑料吧！放眼望去，互联网90%以上的网站都是剧中的，其中又有一大部分是中小型网站。说中小型网站还不如直接说咱们个人站长得了！
-
只有用感情来驱动设计才能让作品更出色
成为一名优秀的设计师，需要具备很多素质，共情是其中最重要的一种。 不论你是UI设计师还是平面设计师，你的工作是专注用户体验，还是关于产品设计，其实你一直都在借助共情/同理心来理解、…
-
Logo设计最巧妙的方法：同构、矛盾、重叠、变幻
同构 同构标志图形是利用事物与事物之间某些相似元素，并按一定的内在逻辑关系来进行图形的构成，相似元素的范围极为宽广，同构组织关系，无论是哪一种形式结合，重要的是既要注重整体的概念，…
-
前端性能优化-图片懒加载（防抖、节流）
懒加载使用场景 在一些图片量比较大的场景（电商首页，小程序首页等），如果我们打开页面时就加载所有的图片，那势必会导致页面的卡顿以及白屏，给用户不好的体验，导致用户流失。 但是我们仔…
-
用色彩设计网页是设计师的独门秘诀
色彩的魅力是无限的，它可以让本身很平淡无味的东西，瞬间就能变得漂亮、美丽起来。信息时代的快速到来，网络也开始变的多姿多彩。人们不再局限于简单的文字与图片，他们要求网页看上去漂亮，舒适。所以当代设计者不仅要掌握基本的网站制作技术，还需要掌握网站的风格，配色等设计艺术。其中色彩在网站设计中占据相当重要的地位。
