agentsclimarketplace

Javascript progress bar emoji animation

Skill ECNU-ICALK/AutoSkill/SkillBank/ConvSkill/english_gpt3.5_8/javascript_progress_bar_emoji_animation

AutoSkill: Experience-Driven Lifelong Learning via Skill Self-Evolution

Install
npx -y skills add ECNU-ICALK/AutoSkill --skill javascript_progress_bar_emoji_animation

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

  • no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.

What its author says it does

Copied from the file, not written here

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

SKILL.md

2.6 KB, as published. Nobody here has run it

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

Keep looking

Skills are one crate of 328,083. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.