Sign in
Skip to solution
easyMachine Coding

Build a Progress Bar

1.0k views
01

Understand the problem

Build a progress bar that animates toward a target percentage.

ReactUIAnimation
02

Attempt it yourself

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

Nudge consolestandby

Stuck? Beam a request up — the console returns a conceptual nudge that guides your logic without spoiling the implementation.

03

Study the solution

Solve in

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 `Progr

Solution ready — 2 min read

Classified // press E to declassify

04

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>
  );
}
05

Join the discussion

Discussion (0)

Sign in to join the discussion.

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

Transmission complete // awaiting log

KEEP THE
STREAK ALIVE.

Dossier 7 of 87 decoded in the Frontend Machine Coding track. One more won't hurt.

Back to track