大家好，我是「前端实验室」爱分享的了不起~
Loading效果在实际开发中是很常见的,尤其是在 Ajax 请求的时候,可以给用户一个很好的交互体验，一个好的loading效果会减轻用户等待的枯燥，也不会因为页面的白屏卡顿导致用户的流失！
今天就给大家分享来自国外的CSS大佬使用纯 CSS 实现的 600 个 Loading 效果！
使用方式很简单，只需要一行HTML代码即可实现：
代码语言：javascript复制<div class="loader"></div>
找到你想要的效果，直接点击复制对应的CSS代码就可以了，比如：
代码语言：javascript复制/* 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效果~
