实用干货：最全的Loading动画合集网站！复制即用

大家好，我是大澈！

本文约1000+字，整篇阅读大约需要2分钟。

感谢关注微信公众号："程序员大澈"，免费领取"面试礼包"一份，然后免费加入问答群，从此让解决问题的你不再孤单！

1. 干货速览

前端 Loading 功能，对用户体验至关重要。

Loading 指的就是网页或应用加载时或处理数据时，显示的加载过渡动画。

它提供了一种视觉上的反馈机制，让用户了解操作正在进行中，并帮助用户减轻等待焦虑感，进而优化用户体验。

倘若此时，你还在手写Loading，那么你就out了！

今天，我就给朋友们分享一个拥有 600+ 条纯css代码编写的 Loading 动画合集网站。

使用它非常简单，点击动画中间，就可以一键复制代码，然后即可直接在自己的项目中使用了。

传送门：https://css-loaders.com/

下面请看这个 Loading 动画合集网站的详细介绍！

2. 干货详细

先聊聊网站内容，再说一下怎么使用，最后老习惯作总结。

2.1 支持随机体验

进入网站，除了大大的标题，我们能很直观的看到一块实例动画演示区域。

在此区域，我们可以点击按钮，随机切换任意一个 Loading 动画，说不定就是你想要的那个Style！

2.2 支持分类展示

在网站的左侧，有着很多 Loading 动画分类。

通过这些分类，你可以非常快速且直观的找到你想要的 Loading 动画。

2.3 使用超方便

简单举个例子哈！

先加一行固定的HTML：

html 复制代码

<div class="loader"></div>

再点击动画中间，一键复制CSS代码到指定位置：

css 复制代码

.loader {
  width: 30px;
  aspect-ratio: 1;
  background: #554236;
  display: grid;
  animation: l4-0 1s infinite linear;
}
.loader::before,
.loader::after {
  content: "";
  grid-area: 1/1;
  background:#f77825;
  animation: inherit;
  animation-name: l4-1;
}
.loader::after {
  background: #60B99A;
  --s: 60deg;
}
@keyframes l4-0 {
  0%,20% {transform: rotate(0)}
  100%   {transform: rotate(90deg)}
}
@keyframes l4-1 {
  50% {transform: rotate(var(--s,30deg))}
  100% {transform: rotate(0)}
}

OK，大功告成！

2.4 小结

这里没啥总结的，一句话：CSS文化，博大精深！

结语

建立这个平台的初衷：

打造一个专注于前端功能问题的问答平台，让大家高效搜索处理同样问题。
遇到有共鸣的问题，与众多同行朋友们一起讨论，一起沉淀成长。
平台现拥有功能问题、技术资讯、实用干货3个专栏内容。

感谢关注微信公众号："程序员大澈"，免费领取"面试礼包"一份，然后免费加入问答群，从此让解决问题的你不再孤单！