纯CSS实现的Loading效果，老司机必备神器！

程序员老鱼

发布于 2023-11-05 13:45:28

3520

发布于 2023-11-05 13:45:28

文章被收录于专栏：前端实验室前端实验室

大家好，我是「前端实验室」爱分享的了不起~

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效果~