App.css

.meter {
  stroke-linecap: round;
  stroke-width: 8;
  transition: stroke-dashoffset 850ms ease-in-out;
}

.svg-container {
  transform: rotate(-90deg);
  transition: all 1s ease-in-out;
  
  /* SVG */
  fill: none;
  stroke-width: 16;
  stroke-linecap: round;
  stroke-dasharray: 0 999;
}

Skill.jsx

    let loadSkillLevel = () => {
        const meters = document.getElementsByClassName('svg-container')

        const i =
            props.skill.skillName === "React" ? 0 :
            props.skill.skillName === "Vue" ? 1 :
            props.skill.skillName === "Node" ? 2 :
            props.skill.skillName === "Laravel" ? 3 :
            props.skill.skillName === "CSS3" ? 4 : 5

        const circle = meters[i]
        const lenght = 345
        const value = props.skill.percentage
        const to = value * lenght / 100
        circle.style.strokeDasharray = `${to} 999`
    }
    
    return(
        <div key={props.index} className="icon" onMouseEnter={onMouseEnterHandler} onMouseLeave={onMouseLeaveHandler}>
            <p style={{color: props.skill.icon === "react" ? "#09c" : props.skill.icon === "vue" ? "#35495E" : props.skill.icon === "node" ? "#539E43" : props.skill.icon === "laravel" ? "#EA4D42" : props.skill.icon === "css" ? "#1758A7" : "#DB882A"}}>{props.skill.percentage} %</p>
            <animated.img style={frontFace} className="w-75 h-auto" alt={props.skill.skillName} src={props.skill.icon === "react" ? react : props.skill.icon === "vue" ? vue : props.skill.icon === "node" ? node : props.skill.icon === "laravel" ? laravel : props.skill.icon === "css" ? css : java}></animated.img>
            <div style={backFace}>
                <svg
                height="130px"
                width="130px"
                viewBox="0 0 130 130"
                data-value={props.skill.skillName}
                style={{display: turn ? 'block' : 'none', margin: '1.5vh auto'}}
                className="svg-container" >                    
                    <circle
                        style={{display: 'inline-block'}}
                        className="meter"
                        cx="65"
                        cy="65"
                        r="55"
                        stroke={props.skill.icon === "react" ? "#09c" : props.skill.icon === "vue" ? "#35495E" : props.skill.icon === "node" ? "#539E43" : props.skill.icon === "laravel" ? "#EA4D42" : props.skill.icon === "css" ? "#1758A7" : "#DB882A"}
                        fill="transparent">
                    </circle>
                </svg>
            </div>
        </div>
    )