后端开发教程 - Java、Spring Boot 实战 - msg200.com
🎊 无需 SVG！使用 Tailwind CSS 创建内容加载动画
介绍
嗨，DEV 的朋友们！😁
今天我们将讨论如何通过以正确的格式实现内容加载器来数倍改善项目的用户体验。
它不是某种 SVG 或 JavaScript“魔法”，它只是纯 HTML、Tailwind CSS 内置类和一些渐变颜色。
🔥免责声明：没有人会在全球范围内取消SVG 技术的使用。只有在已经使用 Tailwind CSS 框架的项目范围内才会取消。如果您在项目中不使用此框架，您可能会发现本文提供的信息不太有用。
开始吧！🚀
📝 目录
主要优势
正如您从标题中猜到的那样，这是一个使用Tailwind CSS v2.2.x框架的纯 CSS 解决方案。这种方法的主要优点在于，它实际上只是纯 HTML 和 CSS，并且会在用户浏览器中首先加载。
没有“参差不齐”的用户体验（UX），他们首先看到一个空白页面，然后 JavaScript 或 SVG 加载器闪烁并立即显示内容。
🔥注意！用户体验改进工作应该是每个前端开发人员的首要任务！尤其是在客户对业务和整个品牌的忠诚度都取决于此的情况下。
代码说明
为了以后不再详细解释代码中的一些一般要点，我决定立即介绍一下将在加载器布局中使用的类。
其中第一个是渐变类本身.gradient-purple-pink-red：
/* ./src/assets/css/tailwind.css */
/* ... */
@layer utilities {
/* Gradient color */
.gradient-purple-pink-red {
@apply bg-gradient-to-r;
@apply from-purple-400 via-pink-500 to-red-500;
}
/* ... */
}
我习惯在@layer utilities {}图层中定义一组属性，例如颜色或渐变。例如，“我添加一个实用程序来更改元素的颜色”。
😉顺便说一句！在评论里看看你如何使用
@layer以及@apply在 Tailwind CSS 项目中的进展，应该会很有趣。
好的。让我们仔细看看所有属性：
bg-gradient-to-{direction}此属性表示梯度的方向（在我们的例子中r等于right）；from-{color}此属性表示渐变的第一个（起始purple）颜色（在我们的例子中为权重400）；via-{color}此属性表示渐变的第二种（中间pink）颜色（在我们的例子中为权重500）；to-{color}此属性表示渐变的第三种（结束red）颜色（在我们的例子中为权重500）；
我想展示的第二个类是.animate-pulse（这是一个标准的 Tailwind类）。这个类实现了一个神奇的动画，将一个简单的渐变背景变成了一个加载器：
/* Animation keyframe */
@keyframes pulse {
50% {
opacity: .5;
}
}
/* Class for element with animation */
.animate-pulse {
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
一个简单的内容加载器
您在网站上能找到的最常见的加载器是内容加载器。它通常在导航到尚未从后端提取内容的页面后启用。
良好的用户体验是让加载器完全符合待加载内容的结构。这样，用户就不会觉得哪里出错了。用户看到的是一个视觉占位符，而不是几分钟后才会显示的内容。
我们的加载器的最终版本将如下所示：
看起来很简单，对吧？线条只是div具有给定高度和宽度的容器……但是如何在没有 SVG 的情况下制作圆形元素？很简单！添加任何块元素的对称尺寸和内置类.rounded-full。
现在让我们把它们放在一起并构建内容加载器：
🎯注意：请遵循代码中的注释！
<div class="animate-pulse">
<!-- First line heading -->
<div class="mt-8 h-4 gradient-purple-pink-red rounded-full w-4/5"></div>
<div class="py-6">
<!-- Text block 1 -->
<div class="my-4">
<div class="h-3 my-3 gradient-purple-pink-red rounded-full w-4/6"></div>
<div class="h-3 my-3 gradient-purple-pink-red rounded-full w-3/6"></div>
<div class="h-3 my-3 gradient-purple-pink-red rounded-full w-2/6"></div>
</div>
<!-- Text block 2 -->
<div class="my-6">
<div class="h-3 my-3 gradient-purple-pink-red rounded-full w-5/6"></div>
<div class="h-3 my-3 gradient-purple-pink-red rounded-full w-4/6"></div>
<div class="h-3 my-3 gradient-purple-pink-red rounded-full w-2/6"></div>
</div>
<!-- User card (avatar + username) -->
<div class="my-6 flex items-center space-x-3">
<div class="h-10 w-10 gradient-purple-pink-red rounded-full"></div>
<div class="h-3 gradient-purple-pink-red rounded-full w-1/12"></div>
<div class="h-3 gradient-purple-pink-red rounded-full w-1/6"></div>
</div>
<!-- Post data -->
<div class="my-6 h-3 gradient-purple-pink-red rounded-full w-1/6"></div>
</div>
</div>
这个示例完美地展示了根据需求自定义加载器是多么简单灵活。为了巩固一下知识，我们来看看下面的加载器。
列表中卡片的加载器
让我们继续。例如，当你浏览 Instagram 动态或你最喜欢的社交网络时，你会看到另一种上传器。
这些技术可以帮助高负载的 Web 服务在加载 feed 中的数据时改善用户体验。
让我们以某些 Web 服务上的项目的供稿为例：
这个加载器看起来非常自然，不会让人想关闭页面，对吧？这是因为加载器几乎精确地重复了卡片的内容（我们之前讨论过这一点）。
好的，让我们实现这个加载器：
<div class="animate-pulse">
<!-- Head line -->
<div class="gradient-purple-pink-red h-6 rounded-t-3xl"></div>
<div class="py-4 px-6">
<!-- User card (avatar + username) -->
<div class="flex items-center space-x-2">
<div class="h-7 w-7 gradient-purple-pink-red rounded-full"></div>
<div class="h-3 gradient-purple-pink-red rounded-full w-1/3"></div>
</div>
<!-- Text block -->
<div class="my-6">
<!-- Heading -->
<div class="h-5 gradient-purple-pink-red rounded-full w-3/4"></div>
<!-- Description -->
<div class="my-4">
<div class="h-3 my-2 gradient-purple-pink-red rounded-full w-full"></div>
<div class="h-3 my-2 gradient-purple-pink-red rounded-full w-5/6"></div>
<div class="h-3 my-2 gradient-purple-pink-red rounded-full w-4/6"></div>
<div class="h-3 my-2 gradient-purple-pink-red rounded-full w-5/6"></div>
<div class="h-3 my-2 gradient-purple-pink-red rounded-full w-3/6"></div>
<div class="h-3 my-2 gradient-purple-pink-red rounded-full w-2/6"></div>
</div>
</div>
<div class="my-4">
<!-- Button -->
<div class="h-11 gradient-purple-pink-red rounded-lg w-full"></div>
<!-- Post data + time -->
<div class="h-3 my-4 mx-auto gradient-purple-pink-red rounded-full w-1/2"></div>
</div>
</div>
</div>
同样没有什么复杂的，得益于内置的 Tailwind CSS 类，我们可以在几秒钟内完成任何块变化。
结论
使用加载器的表单和样式来提升项目的用户体验。这很简单，但相信我（以我12多年的实践经验来看），会带来很多积极的反馈。
在评论中通过Tailwind Play服务分享您的加载器！
并且首先考虑用户！ 👍
照片和视频来自
- 维克·肖斯塔克https://shostak.dev
聚苯乙烯
如果你想在本博客上看到更多类似的文章，请在下方留言并订阅我。谢谢！😻
❗️ 您可以在Boosty上支持我，可以是永久支持，也可以是一次性支持。所有收益都将用于支持我的开源项目，并激励我为社区创作新的产品和文章。
当然，你也可以帮助我改善开发者的生活！只需以贡献者的身份连接到我的一个项目即可。非常简单！
我的主要项目需要您的帮助（和星星）👇
- 🔥 gowebly：下一代 CLI 工具，可轻松使用 Go 在后端创建出色的 Web 应用程序，使用 htmx、hyperscript 或 Alpine.js 以及前端最流行的 CSS 框架。
- ✨ create-go-app：通过运行一个 CLI 命令，创建一个具有 Go 后端、前端和部署自动化的新的生产就绪项目。
我的其他小项目：yatr、gosl、json2csv、csv2api。
文章来源：https://dev.to/koddr/you-dont-need-svg-creating-animated-loaders-for-content-with-tailwind-css-2cf0