beUI Pro pour mobile est disponible : 50 blocs et écrans React Native
AI Thinking Loaders
6 variantes
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" />;
}
Le code source est verrouillé
Obtenez un accès pour installer les composants premium et voir tout le code source.
Ouvrir le tableau de bordGrid 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" />;
}
Le code source est verrouillé
Obtenez un accès pour installer les composants premium et voir tout le code source.
Ouvrir le tableau de bordDiagonal 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" />;
}
Le code source est verrouillé
Obtenez un accès pour installer les composants premium et voir tout le code source.
Ouvrir le tableau de bordAssembling 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" />;
}
Le code source est verrouillé
Obtenez un accès pour installer les composants premium et voir tout le code source.
Ouvrir le tableau de bordDiamond 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" />;
}
Le code source est verrouillé
Obtenez un accès pour installer les composants premium et voir tout le code source.
Ouvrir le tableau de bordConnected 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" />;
}
Le code source est verrouillé
Obtenez un accès pour installer les composants premium et voir tout le code source.
Ouvrir le tableau de bordInstallation
Ajoutez ce composant avec la CLI shadcn.
$ bunx --bun shadcn add @beui-pro/ai-thinking-loader