beUI Pro 移动端已上线：50 个 React Native 区块和页面
AI Thinking Loaders
6 个变体
Six compact pixel and node animations for AI thinking, analysis, and generation states.
Pixel orbit
index.tsxPixel orbit animation for compact AI status indicators.
TSXcomponents/previews/premium/ai-thinking-loader-preview.tsx
"use client";
import { AIThinkingLoader } from "@/components/premium/ai-thinking-loader";
export function OrbitThinkingPreview() {
return <AIThinkingLoader variant="orbit" />;
}
export function ScanThinkingPreview() {
return <AIThinkingLoader variant="scan" />;
}
export function WaveThinkingPreview() {
return <AIThinkingLoader variant="wave" />;
}
export function AssembleThinkingPreview() {
return <AIThinkingLoader variant="assemble" />;
}
export function DiamondThinkingPreview() {
return <AIThinkingLoader variant="diamond" />;
}
export function NodesThinkingPreview() {
return <AIThinkingLoader variant="nodes" />;
}
Grid scan
index.tsxGrid scan animation for compact AI status indicators.
TSXcomponents/previews/premium/ai-thinking-loader-preview.tsx
"use client";
import { AIThinkingLoader } from "@/components/premium/ai-thinking-loader";
export function OrbitThinkingPreview() {
return <AIThinkingLoader variant="orbit" />;
}
export function ScanThinkingPreview() {
return <AIThinkingLoader variant="scan" />;
}
export function WaveThinkingPreview() {
return <AIThinkingLoader variant="wave" />;
}
export function AssembleThinkingPreview() {
return <AIThinkingLoader variant="assemble" />;
}
export function DiamondThinkingPreview() {
return <AIThinkingLoader variant="diamond" />;
}
export function NodesThinkingPreview() {
return <AIThinkingLoader variant="nodes" />;
}
Diagonal wave
index.tsxDiagonal wave animation for compact AI status indicators.
TSXcomponents/previews/premium/ai-thinking-loader-preview.tsx
"use client";
import { AIThinkingLoader } from "@/components/premium/ai-thinking-loader";
export function OrbitThinkingPreview() {
return <AIThinkingLoader variant="orbit" />;
}
export function ScanThinkingPreview() {
return <AIThinkingLoader variant="scan" />;
}
export function WaveThinkingPreview() {
return <AIThinkingLoader variant="wave" />;
}
export function AssembleThinkingPreview() {
return <AIThinkingLoader variant="assemble" />;
}
export function DiamondThinkingPreview() {
return <AIThinkingLoader variant="diamond" />;
}
export function NodesThinkingPreview() {
return <AIThinkingLoader variant="nodes" />;
}
Assembling tiles
index.tsxAssembling tiles animation for compact AI status indicators.
TSXcomponents/previews/premium/ai-thinking-loader-preview.tsx
"use client";
import { AIThinkingLoader } from "@/components/premium/ai-thinking-loader";
export function OrbitThinkingPreview() {
return <AIThinkingLoader variant="orbit" />;
}
export function ScanThinkingPreview() {
return <AIThinkingLoader variant="scan" />;
}
export function WaveThinkingPreview() {
return <AIThinkingLoader variant="wave" />;
}
export function AssembleThinkingPreview() {
return <AIThinkingLoader variant="assemble" />;
}
export function DiamondThinkingPreview() {
return <AIThinkingLoader variant="diamond" />;
}
export function NodesThinkingPreview() {
return <AIThinkingLoader variant="nodes" />;
}
Diamond loop
index.tsxDiamond loop animation for compact AI status indicators.
TSXcomponents/previews/premium/ai-thinking-loader-preview.tsx
"use client";
import { AIThinkingLoader } from "@/components/premium/ai-thinking-loader";
export function OrbitThinkingPreview() {
return <AIThinkingLoader variant="orbit" />;
}
export function ScanThinkingPreview() {
return <AIThinkingLoader variant="scan" />;
}
export function WaveThinkingPreview() {
return <AIThinkingLoader variant="wave" />;
}
export function AssembleThinkingPreview() {
return <AIThinkingLoader variant="assemble" />;
}
export function DiamondThinkingPreview() {
return <AIThinkingLoader variant="diamond" />;
}
export function NodesThinkingPreview() {
return <AIThinkingLoader variant="nodes" />;
}
Connected nodes
index.tsxConnected nodes animation for compact AI status indicators.
TSXcomponents/previews/premium/ai-thinking-loader-preview.tsx
"use client";
import { AIThinkingLoader } from "@/components/premium/ai-thinking-loader";
export function OrbitThinkingPreview() {
return <AIThinkingLoader variant="orbit" />;
}
export function ScanThinkingPreview() {
return <AIThinkingLoader variant="scan" />;
}
export function WaveThinkingPreview() {
return <AIThinkingLoader variant="wave" />;
}
export function AssembleThinkingPreview() {
return <AIThinkingLoader variant="assemble" />;
}
export function DiamondThinkingPreview() {
return <AIThinkingLoader variant="diamond" />;
}
export function NodesThinkingPreview() {
return <AIThinkingLoader variant="nodes" />;
}
安装
使用 shadcn CLI 添加此组件。
$ bunx --bun shadcn add @beui-pro/ai-thinking-loader