# 小哪吒的风火轮来啦！！！（记 · Loading 组件）

> 一套小而美、纯 CSS + 无状态 React 的 Loading 组件集，可以直接抄进任何项目。文章解释每个动画的实现思路（关键帧、will-change、变形原点的选择），顺便聊一下什么时候用骨架屏、什么时候用旋转 loading 比较合适。

- URL: https://tenggouwa.com/posts/nezha-loading-components/
- 发布: 2019-08-05
- 标签: css, loading

> 前言

    一月一次的分享终于来了，这次我们分享的是每个项目中都要用到的Loading组件；
    以往在开发中，UI同学总要费劲脑汁去画(copy)一些炫酷的loading效果，费时费力；
    所以就想着总结一些常用的效果，直接让UI同学慢慢挑，挑完了，瞬间把他实现，让他给我打电话(call)；
    话不多说，直接上地址。(写的有点匆忙，请忽略我的文件命名，以及布局)
    
    
[预览地址](http://5268.link/loading) --在预览地址，点击对应组件会跳转到代码哦！<br />
[git地址](https://github.com/tenggouwa/Loading)


> 效果-爱的魔力转圈圈

![爱的魔力转圈圈](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2019/8/5/16c602bfe755def7~tplv-t2oaga2asx-image.image)
+ 所有组件均为无状态组件，您可以在任何项目中使用他们。


> 结束

希望这波对你有所帮助，点赞关注不迷路啊，老铁。