50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | KineticLoader（运动Loading组件）

📅 我们继续 50 个小项目挑战！—— KineticLoader组件

仓库地址：https://github.com/SunACong/50-vue-projects

项目预览地址：https://50-vue-projects.vercel.app/

使用 Vue 3 结合 TailwindCSS 创建一个双层 CSS 动画加载器组件。该组件由两个三角形图层组成，分别以不同的延迟进行旋转，形成一种视觉上交错、动态的加载动画效果。

🎯 组件目标

• 创建一个基于 Vue 3 的独立组件
• 使用纯 CSS 实现旋转动画
• 包含两个图层，分别以不同时间开始旋转
• 使用 TailwindCSS 构建布局与样式
• 可轻松复用或嵌入到项目中的任何页面

⚙️ 技术实现点

🧱 组件实现

模板结构 <template>

<template>
    <div class="flex h-screen items-center justify-center bg-[#2c3e50]">
        <div class="relative h-20 w-20">
            <!-- 容器A，初始0度 -->
            <div class="absolute top-0 left-0 rotate-0">
                <div
                    class="h-0 w-0 animate-[rotate_2s_linear_infinite_0.5s] border-[50px] border-transparent border-b-white"></div>
            </div>

            <!-- 容器B，初始90度 -->
            <div class="absolute top-0 left-0 rotate-90">
                <div
                    class="h-0 w-0 animate-[rotate_2s_linear_infinite] border-[50px] border-transparent border-b-white"></div>
            </div>
        </div>
    </div>
</template>

自定义动画样式 <style>

<style>
@keyframes rotate {
    0%,
    25% {
        transform: rotate(0deg);
    }
    50%,
    75% {
        transform: rotate(180deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.animate-[rotate_2s_linear_infinite_0\.5s] {
    animation: rotate 2s linear infinite 0.5s;
}

.animate-[rotate_2s_linear_infinite] {
    animation: rotate 2s linear infinite;
}
</style>

🔍 重点效果实现

✅ 动画核心：双层旋转交错

我们定义了一个名为 rotate 的关键帧动画，让元素从 0° 到 360° 不断旋转：

@keyframes rotate {
    0%, 25% { transform: rotate(0deg); }
    50%, 75% { transform: rotate(180deg); }
    100% { transform: rotate(360deg); }
}

然后分别给两个图层应用相同的动画，但其中一个延迟了 0.5s，从而形成交错效果：

<div class="animate-[rotate_2s_linear_infinite_0.5s]">...</div>
<div class="animate-[rotate_2s_linear_infinite]">...</div>

💡 图形绘制技巧

使用 CSS 的 border 技巧来创建三角形图形：

<div class="h-0 w-0 border-[50px] border-transparent border-b-white"></div>

这是经典的“空 div + border”法，只显示下边框为白色，其余透明，形成一个向上的三角形。

🎨 TailwindCSS 样式重点讲解

📁 常量定义 + 组件路由

constants/index.js 添加组件预览常量：

{
        id: 23,
        title: 'Kinetic Loader',
        image: 'https://50projects50days.com/img/projects-img/23-kinetic-loader.png',
        link: 'KineticLoader',
    },

router/index.js 中添加路由选项：

{
        path: '/KineticLoader',
        name: 'KineticLoader',
        component: () => import('@/projects/KineticLoader.vue'),
    },

🏁 总结

基于 Vue 3 和 TailwindCSS 的加载动画组件是一个轻量级、无依赖的 UI 效果，适合用于加载状态提示、按钮等待反馈等场景。

你可以进一步扩展的功能包括：

• ✅ 支持多种颜色主题（通过 props 或 CSS 变量）
• ✅ 支持尺寸缩放（通过 Tailwind 的 scale 工具类）
• ✅ 封装为可复用组件（如 <AppSpinner />）
• ✅ 添加淡入淡出过渡动画
• ✅ 支持响应式设计（适配移动端）

👉 下一篇，我们将完成ContentPlaceholder组件，一个适用于卡片类加载过程中的背景占位组件。🚀

感谢阅读，欢迎点赞、收藏和分享 😊