41 lines
1.1 KiB
TypeScript
41 lines
1.1 KiB
TypeScript
// Copyright 2024 Signal Messenger, LLC
|
|
// SPDX-License-Identifier: AGPL-3.0-only
|
|
|
|
import React from 'react';
|
|
|
|
export function ProgressCircle({
|
|
fractionComplete,
|
|
width = 24,
|
|
strokeWidth = 3,
|
|
}: {
|
|
fractionComplete: number;
|
|
width?: number;
|
|
strokeWidth?: number;
|
|
}): JSX.Element {
|
|
const radius = width / 2 - strokeWidth / 2;
|
|
const circumference = radius * 2 * Math.PI;
|
|
return (
|
|
<svg className="ProgressCircle" width={width} height={width}>
|
|
<circle
|
|
className="ProgressCircle__background"
|
|
strokeWidth={strokeWidth}
|
|
r={radius}
|
|
cx="50%"
|
|
cy="50%"
|
|
/>
|
|
<circle
|
|
className="ProgressCircle__fill"
|
|
r={radius}
|
|
cx="50%"
|
|
cy="50%"
|
|
strokeWidth={strokeWidth}
|
|
// setting the strokeDashArray to be the circumference of the ring means each dash
|
|
// will cover the whole ring
|
|
strokeDasharray={circumference}
|
|
// offsetting the dash as a fraction of the circumference allows showing the
|
|
// progress
|
|
strokeDashoffset={(1 - fractionComplete) * circumference}
|
|
/>
|
|
</svg>
|
|
);
|
|
}
|