beUI Pro für Mobile ist live: 50 React Native Blöcke und Screens
AI Thinking Loaders
6 Varianten
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" />;
}
Der Quellcode ist gesperrt
Hol dir Zugang, um Premium-Komponenten zu installieren und den vollständigen Quellcode zu sehen.
Dashboard öffnenGrid 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" />;
}
Der Quellcode ist gesperrt
Hol dir Zugang, um Premium-Komponenten zu installieren und den vollständigen Quellcode zu sehen.
Dashboard öffnenDiagonal 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" />;
}
Der Quellcode ist gesperrt
Hol dir Zugang, um Premium-Komponenten zu installieren und den vollständigen Quellcode zu sehen.
Dashboard öffnenAssembling 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" />;
}
Der Quellcode ist gesperrt
Hol dir Zugang, um Premium-Komponenten zu installieren und den vollständigen Quellcode zu sehen.
Dashboard öffnenDiamond 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" />;
}
Der Quellcode ist gesperrt
Hol dir Zugang, um Premium-Komponenten zu installieren und den vollständigen Quellcode zu sehen.
Dashboard öffnenConnected 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" />;
}
Der Quellcode ist gesperrt
Hol dir Zugang, um Premium-Komponenten zu installieren und den vollständigen Quellcode zu sehen.
Dashboard öffnenInstallieren
Füge diese Komponente mit der shadcn CLI hinzu.
$ bunx --bun shadcn add @beui-pro/ai-thinking-loader