Pause, cancel & resume backup media download
This commit is contained in:
parent
65539b1419
commit
028a3f3ef0
28 changed files with 958 additions and 141 deletions
41
ts/components/ProgressCircle.tsx
Normal file
41
ts/components/ProgressCircle.tsx
Normal file
|
@ -0,0 +1,41 @@
|
|||
// 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>
|
||||
);
|
||||
}
|
Loading…
Add table
Add a link
Reference in a new issue