How to create an animated SVG circular progress component in React?

Today I’ll be helping you to step by step create an animated SVG circular progress component (a.k.a the ring progress) from scratch. If you are not using React, you can also apply it in a similar way. Here is the checklist:

1. Understand the DOM layers & properties
2. Create the circular background