纯CSS实现的Loading效果，老司机必备神器！
纯CSS实现的Loading效果，老司机必备神器！
程序员老鱼
发布于 2023-11-05 05:45:28
发布于 2023-11-05 05:45:28
代码可运行
运行总次数：34
代码可运行
大家好，我是「前端实验室」爱分享的了不起~
Loading效果在实际开发中是很常见的,尤其是在 Ajax 请求的时候,可以给用户一个很好的交互体验，一个好的loading效果会减轻用户等待的枯燥，也不会因为页面的白屏卡顿导致用户的流失！
今天就给大家分享来自国外的CSS大佬使用纯 CSS 实现的 600 个 Loading 效果！
使用方式很简单，只需要一行HTML代码即可实现：
<div class="loader"></div>
找到你想要的效果，直接点击复制对应的CSS代码就可以了，比如：
/* HTML: <div class="loader"></div> */
.loader {
width: 120px;
height: 22px;
border-radius: 20px;
color: #514b82;
border: 2px solid;
position: relative;
}
.loader::before {
content: "";
position: absolute;
margin: 2px;
inset: 0 100% 0 0;
border-radius: inherit;
background: currentColor;
animation: l6 2s infinite;
}
@keyframes l6 {
100% {inset:0}
}
就可以实现下面这样的Loading效果~
本文参与 腾讯云自媒体同步曝光计划，分享自微信公众号。
原始发表：2023-11-02，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
推荐阅读
相关推荐
纯css实现117个Loading效果（下）
更多 >腾讯云开发者
