30个纯 CSS 打造的免费开源加载动画，复制就能用

大家好,我是前端实验室的小师妹！

正文开始前先问问大家有没有写过loading图呢？

以前做 loading 都是一张 菊花.gif 走天下， 但现在产品开发要求变高，特别是移动端，显示加载动画前还得加载一个动图，这早就 out 了。

今天给大家介绍了这个开源项目后，大家就再也不用手写loading图了,直接ctrl+c ctrl+v就完了，而且loading样式多达30多个，任君选择

Loaders.css

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

特点

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

使用

使用方式非常简单，如果你不想引入多余的文件，直接去官网上ctrl+c ctrl+v就ok了

如果你用的是vue项目，可以引入插件进行使用，官网简绍的页非常清晰

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

官网：https://connoratherton.com/loaders

写在最后

欢迎加入前端实验室读者交流群，群里有不少技术大神，不定时会分享一些技术要点，更有一些资源收藏爱好者会分享一些优质的学习资料。吃瓜、摸鱼、白嫖技术就等你了~

进群方式：在下方公众号后台，回复 111 ，按提示操作即可进群。