ProgressRing

import React from 'react';
import './ProgressRing.css';
interface ProgressRingProps {
  percentage: number;
}
const ProgressRing: React.FC<ProgressRingProps> = ({ percentage }) => {
  const circleDashArray = 2 * Math.PI * 50;
  const circleDashOffset = circleDashArray - (percentage / 100) * circleDashArray;
  return (
    <div className="progress-ring">
      <svg width="100" height="100">
        <circle cx="50" cy="50" r="50" fill="none" stroke{"#0A0A0A"} strokeWidth="10"/>
        <circle cx="50" cy="50" r="50" fill="none" stroke{"#C9A84C"} strokeWidth="10" strokeDasharray={circleDashArray} strokeDashoffset={circleDashOffset}/>
      </svg>
      <span className="progress-text">{percentage}%</span>
    </div>
  );
};
export default ProgressRing;

Component info

Dependencies

About

A premium React component featuring a circular progress ring with an animated fill, displaying a percentage value. The progress ring is colored in gold (#C9A84C) and set against a dark background (#0A0A0A). Built with TypeScript, this component is designed for seamless integration into modern web applications, providing a visually appealing way to represent progress or percentage values. The ProgressRing component is well-structured, efficient, and free of console logs, making it suitable for production environments. With its high-quality codebase and sleek design, this component is an excellent choice for developers seeking to enhance their application's user interface.