等待中loading 菊花图CSS 效果实现【Antd spin 源码实现】

Candy_home

于 2018-08-09 17:35:32 发布

阅读量6.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： css学习+less学习

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/Candy_home/article/details/81540247

本文介绍了如何实现CSS菊花图加载效果，灵感来源于Antd的Spin组件。作者从缘起出发，分享了从使用gif到探索Antd Spin源码的过程，最终展示了一个仅使用HTML和CSS实现的简单菊花图加载效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

缘起：

今天闲来无事，调试一个单页面VUE的效果，94年的开发小哥哥说，让我给他加个菊花图...Excuse me? 菊花图？长这样么？

还是？长这样？简直让我脑洞大开。。

其实呐，他说的是这个。。等待状态，我内心

好了，那怎么实现呐

第一反应：gif

找个gif 图好麻烦~

想了想、、一定有别的解决方式。

第二反应：看别的怎么做

第一个想起来宠幸的就是Antd，毕竟是我用的最多的库~

来我们去看看antd的loading怎么做的，点进去发现，它不叫loading~叫Spin~

来~看看怎么实现的吧~

超简单~ 只需要 HTML + CSS</

最低0.47元/天解锁文章

200万优质内容无限畅学

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。