Pause, cancel & resume backup media download

ts/components/ProgressCircle.tsx

@@ -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>
+  );
+}