33 lines
1.1 KiB
TypeScript
33 lines
1.1 KiB
TypeScript
|
import React from "react";
|
||
|
|
|
||
|
|
export interface Props {
|
||
|
|
maxProgress?: number;
|
||
|
|
progress: number;
|
||
|
|
|
||
|
|
width?: number;
|
||
|
|
height?: number;
|
||
|
|
|
||
|
|
color?: string;
|
||
|
|
backgroundColor?: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
export default function (props: Props) {
|
||
|
|
const maxProgress = props.maxProgress ? props.maxProgress : 100;
|
||
|
|
const width = props.width ? props.width : 20;
|
||
|
|
const height = props.height ? props.height : 20;
|
||
|
|
|
||
|
|
const color = props.color ? props.color : "black";
|
||
|
|
const backgroundColor = props.backgroundColor ? props.backgroundColor : "white";
|
||
|
|
|
||
|
|
return (
|
||
|
|
<svg height={`${width}`} width={`${height}`} viewBox="0 0 26 26">
|
||
|
|
<circle r="12" cx="13" cy="13" fill="none" stroke={backgroundColor} strokeWidth="2" />
|
||
|
|
<circle r="9" cx="13" cy="13" fill={backgroundColor} stroke="transparent" />
|
||
|
|
<circle r="5" cx="13" cy="13" fill="none"
|
||
|
|
stroke={color}
|
||
|
|
strokeWidth="10"
|
||
|
|
strokeDasharray={`calc(${props.progress} * 31.6 / ${maxProgress}) 31.6`}
|
||
|
|
transform="rotate(-90) translate(-26)" />
|
||
|
|
</svg>
|
||
|
|
)
|
||
|
|
}
|