使用 Tailwind CSS 创建“加载点”动画

当你想要显示加载状态时，简单的旋转器很常见，但有时感觉太普通了。动画圆点是一种更简洁、更友好的替代方案，用户经常在聊天应用、仪表盘和状态栏中看到它。

在本教程中，我们将在 Tailwind CSS 中 构建两种类型的加载点动画：

添加点( Loading.→ Loading..→ Loading...) 弹跳点（三个点接连弹跳，像打字指示器） 1.附加点加载器 步骤 1：扩展 Tailwind 配置 在您的 中tailwind.config.js，为点循环添加一个新的关键帧动画：

// tailwind.config.js export default { theme: { extend: { keyframes: { dotLoop: { '0%': { content: '"."' }, '25%': { content: '".."'}, '50%': { content: '"..."'}, '75%': { content: '""' }, '100%': { content: '"."' }, }, }, animation: { dotLoop: 'dotLoop 1.5s steps(1,end) infinite', }, }, }, }; 👉 在这里我们为content属性添加动画。使用steps(1,end)可确保点立即跳动而不是消失。

第 2 步：添加到 HTML 现在只需使用Tailwind 的after:实用程序：

Loading. Loading.. Loading... Loading Loading. 步骤 3：变化 使其变慢： dotLoop: 'dotLoop 2s steps(1,end) infinite' 改变颜色：用text-green-600或包裹text-red-500。 在按钮、模式或表页脚中重复使用。 2. 弹跳点加载器 这个看起来像聊天“打字指示器”。

步骤 1：Tailwind 配置 添加三个交错弹跳动画：

// tailwind.config.js export default { theme: { extend: { keyframes: { bounceDot: { '0%, 80%, 100%': { transform: 'scale(0)' }, '40%': { transform: 'scale(1)' }, }, }, animation: { bounceDot1: 'bounceDot 1.4s infinite ease-in-out', bounceDot2: 'bounceDot 1.4s infinite ease-in-out 0.2s', bounceDot3: 'bounceDot 1.4s infinite ease-in-out 0.4s', }, }, }, }; 步骤2：HTML加载器

三个小点循环弹跳。非常适合类似聊天的“打字……”状态。

3.何时使用哪个 附加点→ 非常适合内联文本加载器（Loading...，Fetching data...）。 弹跳点→更适合聊天、按钮或等待屏幕等 视觉指示器。 🎉 最后的想法 只需几行代码tailwind.config.js和最少的 HTML，您就可以在 Tailwind CSS 中 创建流畅、可重复使用且现代的加载动画。查看更多www.mxwd.cc