加载与骨架屏

Rotate Loader – Aceternity UI 组件

A rotate loader component with Aceternity UI style animations and effects.

Aceternity UI Rotate Loader loading skeletons React Tailwind CSS

@aceternity/rotate-loader-demo

Live Preview

tsx

"use client";
import React from "react";
import { motion } from "framer-motion";
import { cn } from "@/lib/utils";

export const RotateLoader = ({
    className,
    children,
    ...props
}) => {
  return (
    <motion.div
      whileHover={{ scale: 1.02 }}
      transition={{ type: "spring", stiffness: 300 }}
      className={cn(
        "relative rounded-2xl border border-neutral-200 bg-white p-6 shadow-lg",
        "dark:border-neutral-800 dark:bg-neutral-900",
        className
      )}
      {...props}
    >
      {children}
    </motion.div>
  );
};

安装

npx shadcn@latest add @aceternity/rotate-loader

A rotate loader component with Aceternity UI style animations and effects.

## 概述

Rotate Loader 是 Aceternity UI 组件库中的一个精选组件，专为 React + Tailwind CSS 项目设计。它提供了流畅的动画效果和现代化的视觉体验，可以轻松集成到你的项目中。

## 特性

- **React + TypeScript** 支持，类型安全
- **Tailwind CSS** 样式，响应式设计
- **Framer Motion** 动画引擎，流畅自然
- **复制即用**，无需额外安装依赖
- **暗色模式**兼容
- **SSR/SSG**友好，支持 Next.js

## 使用场景

1. **产品落地页** - 为你的产品页面添加视觉冲击力
2. **后台管理系统** - 提升管理界面的用户体验
3. **个人作品集** - 展示你的技术实力
4. **SaaS 应用** - 为用户提供现代化的界面
5. **内容展示** - 以引人入胜的方式展示内容

## 技术栈

- React 18+
- Tailwind CSS 3+
- Framer Motion / Motion
- TypeScript（可选）

## 兼容性

| 框架 | 支持状态 |
|------|---------|
| Next.js 14+ | 完全支持 |
| Vite + React | 完全支持 |
| Create React App | 支持 |
| Remix | 支持 |
| Astro + React | 支持 |

## 注意事项

- 确保已安装 `framer-motion` 和 `tailwindcss`
- 组件使用 `"use client"` 指令，适用于 App Router
- 所有组件均支持暗色模式
- 建议在 `tailwind.config.js` 中配置 `cn` 工具函数

Examples

Basic Usage

@aceternity/rotate-loader-demo

tsx

"use client";
import React from "react";
import { motion } from "framer-motion";

export const RotateLoader = ({ children, className }) => {
  return (
    <div className={`relative h-full w-full overflow-hidden bg-neutral-950 ${className}`}>
      <motion.div
        className="absolute inset-0"
        style={{
          backgroundImage: "radial-gradient(circle at 50% 50%, rgba(120,70,255,0.15), transparent 50%)",
        }}
        animate={{ opacity: [0.5, 1, 0.5] }}
        transition={{ duration: 4, repeat: Infinity }}
      />
      <div className="relative z-10 flex h-full items-center justify-center">
        {children}
      </div>
    </div>
  );
};

With Custom Props

@aceternity/rotate-loader-custom-demo

tsx

"use client";
import React from "react";
import { motion, useMotionValue, useTransform, useSpring } from "framer-motion";

export const RotateLoader = ({ children, className }) => {
  const x = useMotionValue(0);
  const y = useMotionValue(0);
  const rotateX = useTransform(y, [-100, 100], [10, -10]);
  const rotateY = useTransform(x, [-100, 100], [-10, 10]);
  const springX = useSpring(rotateX, { damping: 20 });
  const springY = useSpring(rotateY, { damping: 20 });

  return (
    <motion.div
      onMouseMove={(e) => {
        const rect = e.currentTarget.getBoundingClientRect();
        x.set(e.clientX - rect.left - rect.width / 2);
        y.set(e.clientY - rect.top - rect.height / 2);
      }}
      onMouseLeave={() => { x.set(0); y.set(0); }}
      style={{ rotateX: springX, rotateY: springY, transformPerspective: 1000 }}
      className={className}
    >
      {children}
    </motion.div>
  );
};

Advanced Configuration

@aceternity/rotate-loader-advanced-demo

tsx

"use client";
import React from "react";
import { motion, useMotionValue, useTransform, useSpring } from "framer-motion";

export const RotateLoader = ({ children, className }) => {
  const x = useMotionValue(0);
  const y = useMotionValue(0);
  const rotateX = useTransform(y, [-100, 100], [10, -10]);
  const rotateY = useTransform(x, [-100, 100], [-10, 10]);
  const springX = useSpring(rotateX, { damping: 20 });
  const springY = useSpring(rotateY, { damping: 20 });

  return (
    <motion.div
      onMouseMove={(e) => {
        const rect = e.currentTarget.getBoundingClientRect();
        x.set(e.clientX - rect.left - rect.width / 2);
        y.set(e.clientY - rect.top - rect.height / 2);
      }}
      onMouseLeave={() => { x.set(0); y.set(0); }}
      style={{ rotateX: springX, rotateY: springY, transformPerspective: 1000 }}
      className={className}
    >
      {children}
    </motion.div>
  );
};

Props

Prop	Type	Default	Description	Required
`className`	`string`	`""`	Additional CSS classes	No
`children`	`React.ReactNode`	`-`	Child elements	Yes
`duration`	`number`	`0.5`	Animation duration in seconds	No
`onClick`	`() => void`	`-`	Click handler	No