javascript_progress_bar_emoji_animation

SKILL.md

---
id: "be2af237-126a-4cd0-9a43-6261397a927c"
name: "javascript_progress_bar_emoji_animation"
description: "Implements a JavaScript progress bar with live updates using a Food and AI themed emoji animation, strictly using string concatenation and requestAnimationFrame."
version: "0.1.1"
tags:
  - "javascript"
  - "progress-bar"
  - "animation"
  - "emoji"
  - "frontend"
  - "requestanimationframe"
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"
---

# 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