Instructions

Your task is to build a small app where clicking an "Add" button creates a new progress bar on the page. Each progress bar should start filling automatically as soon as it appears, and smoothly reach 100% in about 2 seconds.

Requirements

Clicking the "Add" button should create a new progress bar. Each progress bar should fill up from 0% to 100% automatically. The fill animation should take approximately 2000ms for each bar. Multiple progress bars can be on the screen at the same time, each with its own independent animation.

Bonus (Optional)

Make the animation speed configurable. Make the animation bar fill up smoothly. Display the percentage value inside each progress bar as it fills.

Instructions

Your task is to build a small app where clicking an "Add" button creates a new progress bar on the page. Each progress bar should start filling automatically as soon as it appears, and smoothly reach 100% in about 2 seconds. #### Requirements Clicking the "Add" button should create a new progress bar. Each progress bar should fill up from 0% to 100% automatically. The fill animation should take approximately 2000ms for each bar. Multiple progress bars can be on the screen at the same time, each with its own independent animation. #### Bonus (Optional) Make the animation speed configurable. Make the animation bar fill up smoothly. Display the percentage value inside each progress bar as it fills.

import { useEffect, useState } from "react"

export default function App() {
  return (
    <div>
      <button>Add</button>
    </div>
  );
}