Lesson 10 Creating progress circle

How to Create a Circular Progress Circle in React

Step 1: Set up the Movie Card Component

• Inside the Movie Card component, create two divisions to wrap the image and progress circle.
• Give the first div a class name of "related" for styling purposes.

Step 2: Create the Circular Progress Circle

• Inside the second div, define an absolute position at the bottom with a slight offset.
• Add ellipses for now, which will be replaced with the progress circle component later.

Step 3: Style the Progress Circle

• Set the width and height of the circle to 38 pixels and give it a background color of "tmdb blue."
• Import the progress circle component and replace the ellipses with it.

Step 4: Design the Circular Progress Circle

• Create an SVG element with a width and height of 34 pixels and set the view box accordingly.
• Center the SVG element by using flex properties.
• Create a circle element inside the SVG to represent the progress bar.

Step 5: Customize the Progress Circle

• Adjust the stroke width to define the thickness of the progress bar.
• Use stroke dash array to create a dotted or dashed effect for the progress bar.
• Calculate the percentage of completion based on the rating and adjust the progress accordingly.

Step 6: Apply Styling and Colors

• Define color schemes for different rating levels (low, medium, high, not rated).
• Use the get color function to assign colors based on the rating percentage.

Step 7: Add Interaction and Effects

• Implement hover effects for the progress circle to change color on hover.
• Use the Font Awesome library to create a custom ellipsis icon for the progress circle.

Step 8: Finalize the Progress Circle

• Fine-tune the styling, positioning, and responsiveness of the progress circle.
• Test the progress circle component by passing different rating percentages.

Step 9: Conclusion

• You have successfully created a circular progress circle component in React with customizable styles and interactive features.

By following these steps, you can create a visually appealing and functional circular progress circle component for your React application.