The core idea is to use React state to manage the progress percentage and `useEffect` with `requestAnimationFrame` to smoothly animate the progress towards a target. We'll use CSS `transition` for the visual animation. ### Step 1 — Basic Component Structure Start by creating a functional React component for the `ProgressBar` that accepts a `targetPercentage` prop. Initialize a local state `currentPercentage` to 0. ```jsx import React, { useState, useEffect } from 'react'; const ProgressBar = ({ targetPercentage }) => { const [currentPercentage, setCurrentPercentage] = useState(0); return ( ); }; export default ProgressBar; ``` ### Step

easyMachine Coding

Build a Progress Bar

1.0k views

Understand the problem

Build a progress bar that animates toward a target percentage.

ReactUIAnimation

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Stuck? AI Nudge Available

Get a conceptual hint to guide your logic without spoiling the final implementation.

Study the solution

Solve in

The solution is waiting

Give it an honest attempt first — then compare your thinking with the full walkthrough.

React solution

Complete solutionRun Playground

import React, { useState, useEffect } from 'react';
import ProgressBar from './src/ProgressBar';

export default function App() {
  const [progress, setProgress] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setProgress(prev => {
        const next = prev + 10;
        return next > 100 ? 0 : next;
      });
    }, 1500);

    return () => clearInterval(interval);
  }, []);

  return (
    <div style={{ fontFamily: 'sans-serif', textAlign: 'center', padding: '20px' }}>
      <h1>Progress Bar Demo</h1>
      <div style={{ width: '80%', margin: '20px auto' }}>
        <ProgressBar targetPercentage={progress} />
      </div>
      <p>Current Target: <strong>{progress}%</strong></p>
    </div>
  );
}

Join the discussion

Discussion (0)

No responses yet. Be the first to share what you think.

Build a Counter component

Build a Traffic Light