Progress Bar

32.3% Acceptance

Create a component called ProgressBar which displays a progress bar. The progress bar should have the following styling applied:

  • A width of 100%
  • A height of 20px
  • A border radius of 5px
  • The completed bit should be green
  • The remaining bit should be lightgrey

You add the CSS to the component using Styled Components or using Inline CSS or adding identifiers and using the App.css file. It's totally up to you

The component should accept a percent prop which is used to determine how many percentage of the progress bar to fill with green colour.

We have already written some code for you in the App.jsx file.


Do not edit the data-testid attributes that are present in the component, these are used for testing your code