KokonutUI
A multi-phase loading state that simulates AI task progress. Cycles through task sequences with auto-scrolling code lines, a colorful spinning progress indicator, and gradient fade overlays.
Cycles through three built-in phases: web searching, result analysis, and UI/UX enhancement, each with its own status label and log lines.
Lines appear incrementally in a fixed-height container with smooth scroll behavior, mimicking a live terminal or agent log output.
Six concentric colored circles rotate in alternating directions with staggered delays, masked by a radial progress fill.
A top-to-bottom gradient overlay fades older lines, drawing attention to the newest output while keeping the log readable.
This component has no props. It renders a self-contained loading animation with hardcoded task sequences.
Task sequences, line content, and timing are defined as constants inside the component file. To customize, edit TASK_SEQUENCES in the source.
The progress ring advances per-sequence (not per-line), so the visual progress maps to phase completion rather than individual log entries.