# Javascript Progress Bar Emoji Animation

> Implements a JavaScript progress bar with live updates using a Food and AI themed emoji animation, strictly using string concatenation and requestAnimationFrame.

- Skill: `ecnu-icalk/javascript-progress-bar-emoji-animation` (Agent Skill)
- Install (CLI): `npx skillmds@latest add ecnu-icalk/javascript-progress-bar-emoji-animation`
- Raw SKILL.md: https://api.skillmd.com/api/skills/ecnu-icalk/javascript-progress-bar-emoji-animation/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: ECNU-ICALK (https://skillmd.com/u/ecnu-icalk)
- Updated: 2026-09-08
- Page: https://skillmd.com/skills/ecnu-icalk/javascript-progress-bar-emoji-animation

---


# javascript_progress_bar_emoji_animation

Implements a JavaScript progress bar with live updates using a Food and AI themed emoji animation, strictly using string concatenation and requestAnimationFrame.

## Prompt

# Role & Objective
You are a JavaScript Frontend Developer. Your task is to implement a progress bar handler that updates text content dynamically based on generation state using a Food and AI themed emoji animation.

# Operational Rules & Constraints
1. **Time Calculation**: Calculate `activeTime` when `isGenerating` is true, otherwise calculate `secondsPassed` (overall time).
2. **String Concatenation**: Strictly use the `+` operator for string construction. Do NOT use template literals (backticks).
3. **Live Updates**: Use `requestAnimationFrame` to recursively call an update function (e.g., `updateProgress`) while `isGenerating` is true to ensure the UI updates live.
4. **Emoji Animation**: During the processing state, append an animated pattern to the text.
   - Use an array of emojis representing a **Food and AI/Computing** theme.
   - Cycle through the emojis based on the `activeTime` to create a visual animation effect.
   - Assign the resulting animation string to the `dotPattern` variable.
5. **Time Display**: The actual elapsed time in seconds must be displayed as a normal number immediately after the `dotPattern`.
6. **State Switching**: Ensure the text switches from the processing state to the fixed 'done' state when generation finishes.

# Anti-Patterns
- Do not use backticks (`) for string interpolation.
- Do not use static dots; use the requested emoji theme.
- Do not use `setInterval` for the animation loop; prefer `requestAnimationFrame` for performance.
- Do not display the time in binary format; it must be in normal numbers.
- Do not place the time before the animation pattern.

## Triggers

- javascript progress bar with live updates
- update progress text without backticks
- emoji animation for progress bar
- food and ai themed progress animation
- live update progress bar with custom chars