diff --git a/.changeset/itchy-kids-travel.md b/.changeset/itchy-kids-travel.md
new file mode 100644
index 00000000000..06e87f65e00
--- /dev/null
+++ b/.changeset/itchy-kids-travel.md
@@ -0,0 +1,24 @@
+---
+"@spectrum-css/progresscircle": major
+---
+
+## Progress circle S2 migration
+
+This is the S2 migration of the progress circle. The original markup has changed to an svg and circle element to allow CSS styles such as `stroke-linecap`. This was necessary to match the design. The `--small/--medium/--large` sizing classes have been deprecated in favor of t-shirt classes `--sizeS/--sizeM/--sizeL`
+
+### Animation
+
+`@keyframes spectrum-dashoffset-animation`:
+This animation was created by React Spectrum and used to keep the same speed and bezier curve.
+
+### Added tokens
+
+### Removed styles & mods
+
+`--spectrum-progress-circle-track-border-color-over-background`
+`--spectrum-progress-circle-fill-border-color-over-background`
+`--spectrum-progress-circle-track-border-style`
+`--spectrum-progress-circle-track-border-style`
+`--highcontrast-progress-circle-track-border-style`
+`--mod-progress-circle-track-border-style`
+`--spectrum-progress-circle-track-border-style`
diff --git a/components/progresscircle/animation.css b/components/progresscircle/animation.css
index 176d4da4c17..433f642948b 100644
--- a/components/progresscircle/animation.css
+++ b/components/progresscircle/animation.css
@@ -11,500 +11,23 @@
  * governing permissions and limitations under the License.
  */
 
-.spectrum-ProgressCircle--indeterminate-fill-submask-2 {
-	animation: 1s infinite linear spectrum-fill-mask-2;
-}
-
-@keyframes spectrum-fill-mask-1 {
+@keyframes spectrum-fills-rotate {
 	0% {
-		transform: rotate(90deg);
-	}
-
-	1.69% {
-		transform: rotate(72.3deg);
-	}
-
-	3.39% {
-		transform: rotate(55.5deg);
-	}
-
-	5.08% {
-		transform: rotate(40.3deg);
-	}
-
-	6.78% {
-		transform: rotate(25deg);
-	}
-
-	8.47% {
-		transform: rotate(10.6deg);
-	}
-
-	10.17% {
-		transform: rotate(0deg);
-	}
-
-	11.86% {
-		transform: rotate(0deg);
-	}
-
-	13.56% {
-		transform: rotate(0deg);
-	}
-
-	15.25% {
-		transform: rotate(0deg);
-	}
-
-	16.95% {
-		transform: rotate(0deg);
-	}
-
-	18.64% {
-		transform: rotate(0deg);
-	}
-
-	20.34% {
-		transform: rotate(0deg);
-	}
-
-	22.03% {
-		transform: rotate(0deg);
-	}
-
-	23.73% {
-		transform: rotate(0deg);
-	}
-
-	25.42% {
-		transform: rotate(0deg);
-	}
-
-	27.12% {
-		transform: rotate(0deg);
-	}
-
-	28.81% {
-		transform: rotate(0deg);
-	}
-
-	30.51% {
-		transform: rotate(0deg);
-	}
-
-	32.2% {
-		transform: rotate(0deg);
-	}
-
-	33.9% {
-		transform: rotate(0deg);
-	}
-
-	35.59% {
-		transform: rotate(0deg);
-	}
-
-	37.29% {
-		transform: rotate(0deg);
-	}
-
-	38.98% {
-		transform: rotate(0deg);
-	}
-
-	40.68% {
-		transform: rotate(0deg);
-	}
-
-	42.37% {
-		transform: rotate(5.3deg);
-	}
-
-	44.07% {
-		transform: rotate(13.4deg);
-	}
-
-	45.76% {
-		transform: rotate(20.6deg);
-	}
-
-	47.46% {
-		transform: rotate(29deg);
-	}
-
-	49.15% {
-		transform: rotate(36.5deg);
-	}
-
-	50.85% {
-		transform: rotate(42.6deg);
-	}
-
-	52.54% {
-		transform: rotate(48.8deg);
-	}
-
-	54.24% {
-		transform: rotate(54.2deg);
-	}
-
-	55.93% {
-		transform: rotate(59.4deg);
-	}
-
-	57.63% {
-		transform: rotate(63.2deg);
-	}
-
-	59.32% {
-		transform: rotate(67.2deg);
-	}
-
-	61.02% {
-		transform: rotate(70.8deg);
-	}
-
-	62.71% {
-		transform: rotate(73.8deg);
-	}
-
-	64.41% {
-		transform: rotate(76.2deg);
-	}
-
-	66.1% {
-		transform: rotate(78.7deg);
-	}
-
-	67.8% {
-		transform: rotate(80.6deg);
-	}
-
-	69.49% {
-		transform: rotate(82.6deg);
-	}
-
-	71.19% {
-		transform: rotate(83.7deg);
-	}
-
-	72.88% {
-		transform: rotate(85deg);
-	}
-
-	74.58% {
-		transform: rotate(86.3deg);
-	}
-
-	76.27% {
-		transform: rotate(87deg);
-	}
-
-	77.97% {
-		transform: rotate(87.7deg);
-	}
-
-	79.66% {
-		transform: rotate(88.3deg);
-	}
-
-	81.36% {
-		transform: rotate(88.6deg);
-	}
-
-	83.05% {
-		transform: rotate(89.2deg);
-	}
-
-	84.75% {
-		transform: rotate(89.2deg);
-	}
-
-	86.44% {
-		transform: rotate(89.5deg);
-	}
-
-	88.14% {
-		transform: rotate(89.9deg);
-	}
-
-	89.83% {
-		transform: rotate(89.7deg);
-	}
-
-	91.53% {
-		transform: rotate(90.1deg);
-	}
-
-	93.22% {
-		transform: rotate(90.2deg);
-	}
-
-	94.92% {
-		transform: rotate(90.1deg);
-	}
-
-	96.61% {
-		transform: rotate(90deg);
-	}
-
-	98.31% {
-		transform: rotate(89.8deg);
+		transform: rotate(-90deg);
 	}
 
 	100% {
-		transform: rotate(90deg);
+		transform: rotate(270deg);
 	}
 }
 
-@keyframes spectrum-fill-mask-2 {
-	0% {
-		transform: rotate(180deg);
-	}
-
-	1.69% {
-		transform: rotate(180deg);
-	}
-
-	3.39% {
-		transform: rotate(180deg);
-	}
-
-	5.08% {
-		transform: rotate(180deg);
-	}
-
-	6.78% {
-		transform: rotate(180deg);
-	}
-
-	8.47% {
-		transform: rotate(180deg);
-	}
-
-	10.17% {
-		transform: rotate(179.2deg);
-	}
-
-	11.86% {
-		transform: rotate(164deg);
-	}
-
-	13.56% {
-		transform: rotate(151.8deg);
-	}
-
-	15.25% {
-		transform: rotate(140.8deg);
-	}
-
-	16.95% {
-		transform: rotate(130.3deg);
-	}
-
-	18.64% {
-		transform: rotate(120.4deg);
-	}
-
-	20.34% {
-		transform: rotate(110.8deg);
-	}
-
-	22.03% {
-		transform: rotate(101.6deg);
-	}
-
-	23.73% {
-		transform: rotate(93.5deg);
-	}
-
-	25.42% {
-		transform: rotate(85.4deg);
-	}
-
-	27.12% {
-		transform: rotate(78.1deg);
-	}
-
-	28.81% {
-		transform: rotate(71.2deg);
-	}
-
-	30.51% {
-		transform: rotate(89.1deg);
-	}
-
-	32.2% {
-		transform: rotate(105.5deg);
-	}
-
-	33.9% {
-		transform: rotate(121.3deg);
-	}
-
-	35.59% {
-		transform: rotate(135.5deg);
-	}
-
-	37.29% {
-		transform: rotate(148.4deg);
-	}
-
-	38.98% {
-		transform: rotate(161deg);
-	}
-
-	40.68% {
-		transform: rotate(173.5deg);
-	}
-
-	42.37% {
-		transform: rotate(180deg);
-	}
-
-	44.07% {
-		transform: rotate(180deg);
-	}
-
-	45.76% {
-		transform: rotate(180deg);
-	}
-
-	47.46% {
-		transform: rotate(180deg);
-	}
-
-	49.15% {
-		transform: rotate(180deg);
-	}
-
-	50.85% {
-		transform: rotate(180deg);
-	}
-
-	52.54% {
-		transform: rotate(180deg);
-	}
-
-	54.24% {
-		transform: rotate(180deg);
-	}
-
-	55.93% {
-		transform: rotate(180deg);
-	}
-
-	57.63% {
-		transform: rotate(180deg);
-	}
-
-	59.32% {
-		transform: rotate(180deg);
-	}
-
-	61.02% {
-		transform: rotate(180deg);
-	}
-
-	62.71% {
-		transform: rotate(180deg);
-	}
-
-	64.41% {
-		transform: rotate(180deg);
-	}
-
-	66.1% {
-		transform: rotate(180deg);
-	}
-
-	67.8% {
-		transform: rotate(180deg);
-	}
-
-	69.49% {
-		transform: rotate(180deg);
-	}
-
-	71.19% {
-		transform: rotate(180deg);
-	}
-
-	72.88% {
-		transform: rotate(180deg);
-	}
-
-	74.58% {
-		transform: rotate(180deg);
-	}
-
-	76.27% {
-		transform: rotate(180deg);
-	}
-
-	77.97% {
-		transform: rotate(180deg);
-	}
-
-	79.66% {
-		transform: rotate(180deg);
-	}
-
-	81.36% {
-		transform: rotate(180deg);
-	}
-
-	83.05% {
-		transform: rotate(180deg);
-	}
-
-	84.75% {
-		transform: rotate(180deg);
-	}
-
-	86.44% {
-		transform: rotate(180deg);
-	}
-
-	88.14% {
-		transform: rotate(180deg);
-	}
-
-	89.83% {
-		transform: rotate(180deg);
-	}
-
-	91.53% {
-		transform: rotate(180deg);
-	}
-
-	93.22% {
-		transform: rotate(180deg);
-	}
-
-	94.92% {
-		transform: rotate(180deg);
-	}
-
-	96.61% {
-		transform: rotate(180deg);
-	}
-
-	98.31% {
-		transform: rotate(180deg);
-	}
-
+@keyframes spectrum-dashoffset-animation {
+	0%,
 	100% {
-		transform: rotate(180deg);
+		stroke-dashoffset: 75px;
 	}
-}
 
-@keyframes spectrum-fills-rotate {
-	0% {
-		transform: rotate(-90deg);
-	}
-
-	100% {
-		transform: rotate(270deg);
+	30% {
+		stroke-dashoffset: 20px;
 	}
 }
diff --git a/components/progresscircle/dist/metadata.json b/components/progresscircle/dist/metadata.json
index 263492e6cd3..3e8d5c963ff 100644
--- a/components/progresscircle/dist/metadata.json
+++ b/components/progresscircle/dist/metadata.json
@@ -2,96 +2,28 @@
   "sourceFile": "index.css",
   "selectors": [
     ".spectrum-ProgressCircle",
-    ".spectrum-ProgressCircle--indeterminate .spectrum-ProgressCircle-fillSubMask1",
-    ".spectrum-ProgressCircle--indeterminate .spectrum-ProgressCircle-fillSubMask2",
-    ".spectrum-ProgressCircle--indeterminate .spectrum-ProgressCircle-fills",
-    ".spectrum-ProgressCircle--indeterminate-fill-submask-2",
+    ".spectrum-ProgressCircle--indeterminate .spectrum-ProgressCircle-fill",
+    ".spectrum-ProgressCircle--sizeL",
+    ".spectrum-ProgressCircle--sizeS",
     ".spectrum-ProgressCircle-fill",
-    ".spectrum-ProgressCircle-fillMask1",
-    ".spectrum-ProgressCircle-fillMask2",
-    ".spectrum-ProgressCircle-fillSubMask1",
-    ".spectrum-ProgressCircle-fillSubMask2",
-    ".spectrum-ProgressCircle-fills",
     ".spectrum-ProgressCircle-track",
-    ".spectrum-ProgressCircle.spectrum-ProgressCircle--large",
-    ".spectrum-ProgressCircle.spectrum-ProgressCircle--medium",
-    ".spectrum-ProgressCircle.spectrum-ProgressCircle--small",
-    ".spectrum-ProgressCircle.spectrum-ProgressCircle--staticWhite .spectrum-ProgressCircle-fill",
-    ".spectrum-ProgressCircle.spectrum-ProgressCircle--staticWhite .spectrum-ProgressCircle-track",
+    ".spectrum-ProgressCircle.spectrum-ProgressCircle--staticBlack",
+    ".spectrum-ProgressCircle.spectrum-ProgressCircle--staticWhite",
+    ".spectrum-ProgressCircle:not(.spectrum-ProgressCircle--indeterminate) .spectrum-innerCircle",
+    ".spectrum-ProgressCircle:not(.spectrum-ProgressCircle--indeterminate) .spectrum-outerCircle",
     "0%",
-    "1.69%",
-    "10.17%",
-    "11.86%",
-    "13.56%",
-    "15.25%",
-    "16.95%",
-    "18.64%",
-    "20.34%",
-    "22.03%",
-    "23.73%",
-    "25.42%",
-    "27.12%",
-    "28.81%",
-    "3.39%",
-    "30.51%",
-    "32.2%",
-    "33.9%",
-    "35.59%",
-    "37.29%",
-    "38.98%",
-    "40.68%",
-    "42.37%",
-    "44.07%",
-    "45.76%",
-    "47.46%",
-    "49.15%",
-    "5.08%",
-    "50.85%",
-    "52.54%",
-    "54.24%",
-    "55.93%",
-    "57.63%",
-    "59.32%",
-    "6.78%",
-    "61.02%",
-    "62.71%",
-    "64.41%",
-    "66.1%",
-    "67.8%",
-    "69.49%",
-    "71.19%",
-    "72.88%",
-    "74.58%",
-    "76.27%",
-    "77.97%",
-    "79.66%",
-    "8.47%",
-    "81.36%",
-    "83.05%",
-    "84.75%",
-    "86.44%",
-    "88.14%",
-    "89.83%",
-    "91.53%",
-    "93.22%",
-    "94.92%",
-    "96.61%",
-    "98.31%",
+    "30%",
     "to"
   ],
   "modifiers": [
     "--mod-progress-circle-fill-border-color",
-    "--mod-progress-circle-fill-border-color-over-background",
     "--mod-progress-circle-position",
     "--mod-progress-circle-size",
     "--mod-progress-circle-thickness",
-    "--mod-progress-circle-track-border-color",
-    "--mod-progress-circle-track-border-color-over-background",
-    "--mod-progress-circle-track-border-style"
+    "--mod-progress-circle-track-border-color"
   ],
   "component": [
     "--spectrum-progress-circle-fill-border-color",
-    "--spectrum-progress-circle-fill-border-color-over-background",
     "--spectrum-progress-circle-size",
     "--spectrum-progress-circle-size-large",
     "--spectrum-progress-circle-size-medium",
@@ -100,19 +32,19 @@
     "--spectrum-progress-circle-thickness-large",
     "--spectrum-progress-circle-thickness-medium",
     "--spectrum-progress-circle-thickness-small",
-    "--spectrum-progress-circle-track-border-color",
-    "--spectrum-progress-circle-track-border-color-over-background",
-    "--spectrum-progress-circle-track-border-style"
+    "--spectrum-progress-circle-track-border-color"
   ],
   "global": [
     "--spectrum-accent-content-color-default",
-    "--spectrum-gray-200",
-    "--spectrum-transparent-white-300",
-    "--spectrum-transparent-white-900"
+    "--spectrum-static-black-track-color",
+    "--spectrum-static-black-track-indicator-color",
+    "--spectrum-static-white-track-color",
+    "--spectrum-static-white-track-indicator-color",
+    "--spectrum-track-color"
   ],
   "passthroughs": [],
   "high-contrast": [
     "--highcontrast-progress-circle-fill-border-color",
-    "--highcontrast-progress-circle-fill-border-color-over-background"
+    "--highcontrast-progress-circle-track-color"
   ]
 }
diff --git a/components/progresscircle/index.css b/components/progresscircle/index.css
index 32727879ead..d2adf1c18dd 100644
--- a/components/progresscircle/index.css
+++ b/components/progresscircle/index.css
@@ -1,64 +1,40 @@
 /*!
- * Copyright 2024 Adobe. All rights reserved.
- *
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
+Copyright 2024 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
 
-/* windows high contrast mode */
-@media (forced-colors: active) {
-	.spectrum-ProgressCircle {
-		/* fill is bright color */
-		--highcontrast-progress-circle-fill-border-color: Highlight;
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
 
-		/* fill over background is bright color */
-		--highcontrast-progress-circle-fill-border-color-over-background: Highlight;
-	}
-
-	/* track double for visibility */
-	.spectrum-ProgressCircle-track {
-		--spectrum-progress-circle-track-border-style: double;
-	}
-}
+@import "animation.css";
 
 .spectrum-ProgressCircle {
 	/* circle unfilled border color */
-	--spectrum-progress-circle-track-border-color: var(--spectrum-gray-200);
+	--spectrum-progress-circle-track-border-color: var(--spectrum-track-color);
 
 	/* circle progress fill border color */
 	--spectrum-progress-circle-fill-border-color: var(--spectrum-accent-content-color-default);
 
-	/* over background unfilled border color */
-	--spectrum-progress-circle-track-border-color-over-background: var(--spectrum-transparent-white-300);
-
-	/* over background progress fill border color */
-	--spectrum-progress-circle-fill-border-color-over-background: var(--spectrum-transparent-white-900);
-
-	/* track border style */
-	--spectrum-progress-circle-track-border-style: solid;
-
-	&.spectrum-ProgressCircle--small {
-		--spectrum-progress-circle-size: var(--spectrum-progress-circle-size-small);
-		--spectrum-progress-circle-thickness: var(--spectrum-progress-circle-thickness-small);
-	}
+	/* default size and thickness */
+	--spectrum-progress-circle-size: var(--spectrum-progress-circle-size-medium);
+	--spectrum-progress-circle-thickness: var(--spectrum-progress-circle-thickness-medium);
+}
 
-	&,
-	&.spectrum-ProgressCircle--medium {
-		--spectrum-progress-circle-size: var(--spectrum-progress-circle-size-medium);
-		--spectrum-progress-circle-thickness: var(--spectrum-progress-circle-thickness-medium);
-	}
+.spectrum-ProgressCircle--sizeS {
+	--spectrum-progress-circle-size: var(--spectrum-progress-circle-size-small);
+	--spectrum-progress-circle-thickness: var(--spectrum-progress-circle-thickness-small);
+}
 
-	&.spectrum-ProgressCircle--large {
-		--spectrum-progress-circle-size: var(--spectrum-progress-circle-size-large);
-		--spectrum-progress-circle-thickness: var(--spectrum-progress-circle-thickness-large);
-	}
+.spectrum-ProgressCircle--sizeL {
+	--spectrum-progress-circle-size: var(--spectrum-progress-circle-size-large);
+	--spectrum-progress-circle-thickness: var(--spectrum-progress-circle-thickness-large);
+}
 
+.spectrum-ProgressCircle {
 	display: inline-block;
 	inline-size: var(--mod-progress-circle-size, var(--spectrum-progress-circle-size));
 	block-size: var(--mod-progress-circle-size, var(--spectrum-progress-circle-size));
@@ -68,591 +44,66 @@
 	/* Fix for Safari rendering bug */
 	/* more info: https://github.com/adobe/spectrum-web-components/issues/1392 */
 	transform: translate3d(0, 0, 0);
-}
 
-.spectrum-ProgressCircle-track {
-	box-sizing: border-box;
-	inline-size: var(--mod-progress-circle-size, var(--spectrum-progress-circle-size));
-	block-size: var(--mod-progress-circle-size, var(--spectrum-progress-circle-size));
-
-	border-style: var(--mod-progress-circle-track-border-style, var(--spectrum-progress-circle-track-border-style));
-	border-width: var(--mod-progress-circle-thickness, var(--spectrum-progress-circle-thickness));
-	border-radius: var(--mod-progress-circle-size, var(--spectrum-progress-circle-size));
-	border-color: var(--mod-progress-circle-track-border-color, var(--spectrum-progress-circle-track-border-color));
-}
+	&.spectrum-ProgressCircle--staticWhite {
+		--spectrum-progress-circle-track-border-color: var(--spectrum-static-white-track-color);
+		--spectrum-progress-circle-fill-border-color: var(--spectrum-static-white-track-indicator-color);
+	}
 
-/* circle progress fill parent container */
-.spectrum-ProgressCircle-fills {
-	position: absolute;
-	inset-block-start: 0;
-	inset-inline-start: 0;
-	inline-size: 100%;
-	block-size: 100%;
+	&.spectrum-ProgressCircle--staticBlack {
+		--spectrum-progress-circle-track-border-color: var(--spectrum-static-black-track-color);
+		--spectrum-progress-circle-fill-border-color: var(--spectrum-static-black-track-indicator-color);
+	}
 }
 
-/* circle progress filled */
+.spectrum-ProgressCircle-track,
 .spectrum-ProgressCircle-fill {
 	box-sizing: border-box;
 	inline-size: var(--mod-progress-circle-size, var(--spectrum-progress-circle-size));
 	block-size: var(--mod-progress-circle-size, var(--spectrum-progress-circle-size));
-
-	border-style: solid;
-	border-width: var(--mod-progress-circle-thickness, var(--spectrum-progress-circle-thickness));
-	border-radius: var(--mod-progress-circle-size, var(--spectrum-progress-circle-size));
-	border-color: var(--highcontrast-progress-circle-fill-border-color, var(--mod-progress-circle-fill-border-color, var(--spectrum-progress-circle-fill-border-color)));
-}
-
-/* circle colors over background */
-.spectrum-ProgressCircle.spectrum-ProgressCircle--staticWhite {
-	.spectrum-ProgressCircle-track {
-		border-color: var(--mod-progress-circle-track-border-color-over-background, var(--spectrum-progress-circle-track-border-color-over-background));
-	}
-
-	.spectrum-ProgressCircle-fill {
-		border-color: var(--highcontrast-progress-circle-fill-border-color-over-background, var(--mod-progress-circle-fill-border-color-over-background, var(--spectrum-progress-circle-fill-border-color-over-background)));
-	}
-}
-
-/* animation masks - circle fill progress */
-.spectrum-ProgressCircle-fillMask1,
-.spectrum-ProgressCircle-fillMask2 {
-	inline-size: 50%;
-	block-size: 100%;
-	transform-origin: 100% center;
-	transform: rotate(180deg);
-	overflow: hidden;
-	position: absolute;
 }
 
-.spectrum-ProgressCircle-fillSubMask1,
-.spectrum-ProgressCircle-fillSubMask2 {
-	inline-size: 100%;
-	block-size: 100%;
-	transform-origin: 100% center;
-	overflow: hidden;
-	transform: rotate(-180deg);
+.spectrum-ProgressCircle-track {
+	stroke-width: var(--mod-progress-circle-thickness, var(--spectrum-progress-circle-thickness));
+	stroke: var(--highcontrast-progress-circle-track-color, var(--mod-progress-circle-track-border-color, var(--spectrum-progress-circle-track-border-color)));
 }
 
-.spectrum-ProgressCircle-fillMask2 {
-	transform: rotate(0deg);
+/* circle progress filled */
+.spectrum-ProgressCircle-fill {
+	stroke-width: var(--mod-progress-circle-thickness, var(--spectrum-progress-circle-thickness));
+	stroke: var(--highcontrast-progress-circle-fill-border-color, var(--mod-progress-circle-fill-border-color, var(--spectrum-progress-circle-fill-border-color)));
+	transform: rotate(-90deg);
+	transform-origin: center;
 }
 
 /* animation masks - circle indeterminate with continuous animation */
 .spectrum-ProgressCircle--indeterminate {
-	.spectrum-ProgressCircle-fills {
+	.spectrum-ProgressCircle-fill {
 		will-change: transform;
-		transform: translateZ(0);
-		animation: 1s infinite cubic-bezier(0.25, 0.78, 0.48, 0.89) spectrum-fills-rotate;
+		animation:
+			1s cubic-bezier(0.6, 0.1, 0.3, 0.9) infinite spectrum-fills-rotate,
+			1s cubic-bezier(0.25, 0.1, 0.25, 1.3) infinite spectrum-dashoffset-animation;
 		transform-origin: center;
 	}
-
-	.spectrum-ProgressCircle-fillSubMask1 {
-		will-change: transform;
-		transform: translateZ(0);
-		animation: 1s infinite linear spectrum-fill-mask-1;
-	}
-
-	.spectrum-ProgressCircle-fillSubMask2 {
-		will-change: transform;
-		transform: translateZ(0);
-		animation: 1s infinite linear spectrum-fill-mask-2;
-	}
-}
-
-.spectrum-ProgressCircle--indeterminate-fill-submask-2 {
-	animation: 1s infinite linear spectrum-fill-mask-2;
-}
-
-@keyframes spectrum-fill-mask-1 {
-	0% {
-		transform: rotate(90deg);
-	}
-
-	1.69% {
-		transform: rotate(72.3deg);
-	}
-
-	3.39% {
-		transform: rotate(55.5deg);
-	}
-
-	5.08% {
-		transform: rotate(40.3deg);
-	}
-
-	6.78% {
-		transform: rotate(25deg);
-	}
-
-	8.47% {
-		transform: rotate(10.6deg);
-	}
-
-	10.17% {
-		transform: rotate(0deg);
-	}
-
-	11.86% {
-		transform: rotate(0deg);
-	}
-
-	13.56% {
-		transform: rotate(0deg);
-	}
-
-	15.25% {
-		transform: rotate(0deg);
-	}
-
-	16.95% {
-		transform: rotate(0deg);
-	}
-
-	18.64% {
-		transform: rotate(0deg);
-	}
-
-	20.34% {
-		transform: rotate(0deg);
-	}
-
-	22.03% {
-		transform: rotate(0deg);
-	}
-
-	23.73% {
-		transform: rotate(0deg);
-	}
-
-	25.42% {
-		transform: rotate(0deg);
-	}
-
-	27.12% {
-		transform: rotate(0deg);
-	}
-
-	28.81% {
-		transform: rotate(0deg);
-	}
-
-	30.51% {
-		transform: rotate(0deg);
-	}
-
-	32.2% {
-		transform: rotate(0deg);
-	}
-
-	33.9% {
-		transform: rotate(0deg);
-	}
-
-	35.59% {
-		transform: rotate(0deg);
-	}
-
-	37.29% {
-		transform: rotate(0deg);
-	}
-
-	38.98% {
-		transform: rotate(0deg);
-	}
-
-	40.68% {
-		transform: rotate(0deg);
-	}
-
-	42.37% {
-		transform: rotate(5.3deg);
-	}
-
-	44.07% {
-		transform: rotate(13.4deg);
-	}
-
-	45.76% {
-		transform: rotate(20.6deg);
-	}
-
-	47.46% {
-		transform: rotate(29deg);
-	}
-
-	49.15% {
-		transform: rotate(36.5deg);
-	}
-
-	50.85% {
-		transform: rotate(42.6deg);
-	}
-
-	52.54% {
-		transform: rotate(48.8deg);
-	}
-
-	54.24% {
-		transform: rotate(54.2deg);
-	}
-
-	55.93% {
-		transform: rotate(59.4deg);
-	}
-
-	57.63% {
-		transform: rotate(63.2deg);
-	}
-
-	59.32% {
-		transform: rotate(67.2deg);
-	}
-
-	61.02% {
-		transform: rotate(70.8deg);
-	}
-
-	62.71% {
-		transform: rotate(73.8deg);
-	}
-
-	64.41% {
-		transform: rotate(76.2deg);
-	}
-
-	66.1% {
-		transform: rotate(78.7deg);
-	}
-
-	67.8% {
-		transform: rotate(80.6deg);
-	}
-
-	69.49% {
-		transform: rotate(82.6deg);
-	}
-
-	71.19% {
-		transform: rotate(83.7deg);
-	}
-
-	72.88% {
-		transform: rotate(85deg);
-	}
-
-	74.58% {
-		transform: rotate(86.3deg);
-	}
-
-	76.27% {
-		transform: rotate(87deg);
-	}
-
-	77.97% {
-		transform: rotate(87.7deg);
-	}
-
-	79.66% {
-		transform: rotate(88.3deg);
-	}
-
-	81.36% {
-		transform: rotate(88.6deg);
-	}
-
-	83.05% {
-		transform: rotate(89.2deg);
-	}
-
-	84.75% {
-		transform: rotate(89.2deg);
-	}
-
-	86.44% {
-		transform: rotate(89.5deg);
-	}
-
-	88.14% {
-		transform: rotate(89.9deg);
-	}
-
-	89.83% {
-		transform: rotate(89.7deg);
-	}
-
-	91.53% {
-		transform: rotate(90.1deg);
-	}
-
-	93.22% {
-		transform: rotate(90.2deg);
-	}
-
-	94.92% {
-		transform: rotate(90.1deg);
-	}
-
-	96.61% {
-		transform: rotate(90deg);
-	}
-
-	98.31% {
-		transform: rotate(89.8deg);
-	}
-
-	100% {
-		transform: rotate(90deg);
-	}
 }
 
-@keyframes spectrum-fill-mask-2 {
-	0% {
-		transform: rotate(180deg);
-	}
-
-	1.69% {
-		transform: rotate(180deg);
-	}
-
-	3.39% {
-		transform: rotate(180deg);
-	}
-
-	5.08% {
-		transform: rotate(180deg);
-	}
-
-	6.78% {
-		transform: rotate(180deg);
-	}
-
-	8.47% {
-		transform: rotate(180deg);
-	}
-
-	10.17% {
-		transform: rotate(179.2deg);
-	}
-
-	11.86% {
-		transform: rotate(164deg);
-	}
-
-	13.56% {
-		transform: rotate(151.8deg);
-	}
-
-	15.25% {
-		transform: rotate(140.8deg);
-	}
-
-	16.95% {
-		transform: rotate(130.3deg);
-	}
-
-	18.64% {
-		transform: rotate(120.4deg);
-	}
-
-	20.34% {
-		transform: rotate(110.8deg);
-	}
-
-	22.03% {
-		transform: rotate(101.6deg);
-	}
-
-	23.73% {
-		transform: rotate(93.5deg);
-	}
-
-	25.42% {
-		transform: rotate(85.4deg);
-	}
-
-	27.12% {
-		transform: rotate(78.1deg);
-	}
-
-	28.81% {
-		transform: rotate(71.2deg);
-	}
-
-	30.51% {
-		transform: rotate(89.1deg);
-	}
-
-	32.2% {
-		transform: rotate(105.5deg);
-	}
-
-	33.9% {
-		transform: rotate(121.3deg);
-	}
-
-	35.59% {
-		transform: rotate(135.5deg);
-	}
-
-	37.29% {
-		transform: rotate(148.4deg);
-	}
-
-	38.98% {
-		transform: rotate(161deg);
-	}
-
-	40.68% {
-		transform: rotate(173.5deg);
-	}
-
-	42.37% {
-		transform: rotate(180deg);
-	}
-
-	44.07% {
-		transform: rotate(180deg);
-	}
-
-	45.76% {
-		transform: rotate(180deg);
-	}
-
-	47.46% {
-		transform: rotate(180deg);
-	}
-
-	49.15% {
-		transform: rotate(180deg);
-	}
-
-	50.85% {
-		transform: rotate(180deg);
-	}
-
-	52.54% {
-		transform: rotate(180deg);
-	}
-
-	54.24% {
-		transform: rotate(180deg);
-	}
-
-	55.93% {
-		transform: rotate(180deg);
-	}
-
-	57.63% {
-		transform: rotate(180deg);
-	}
-
-	59.32% {
-		transform: rotate(180deg);
-	}
-
-	61.02% {
-		transform: rotate(180deg);
-	}
-
-	62.71% {
-		transform: rotate(180deg);
-	}
-
-	64.41% {
-		transform: rotate(180deg);
-	}
-
-	66.1% {
-		transform: rotate(180deg);
-	}
-
-	67.8% {
-		transform: rotate(180deg);
-	}
-
-	69.49% {
-		transform: rotate(180deg);
-	}
-
-	71.19% {
-		transform: rotate(180deg);
-	}
-
-	72.88% {
-		transform: rotate(180deg);
-	}
-
-	74.58% {
-		transform: rotate(180deg);
-	}
-
-	76.27% {
-		transform: rotate(180deg);
-	}
-
-	77.97% {
-		transform: rotate(180deg);
-	}
-
-	79.66% {
-		transform: rotate(180deg);
-	}
-
-	81.36% {
-		transform: rotate(180deg);
-	}
-
-	83.05% {
-		transform: rotate(180deg);
-	}
-
-	84.75% {
-		transform: rotate(180deg);
-	}
-
-	86.44% {
-		transform: rotate(180deg);
-	}
-
-	88.14% {
-		transform: rotate(180deg);
-	}
-
-	89.83% {
-		transform: rotate(180deg);
-	}
-
-	91.53% {
-		transform: rotate(180deg);
-	}
-
-	93.22% {
-		transform: rotate(180deg);
-	}
-
-	94.92% {
-		transform: rotate(180deg);
-	}
-
-	96.61% {
-		transform: rotate(180deg);
-	}
-
-	98.31% {
-		transform: rotate(180deg);
-	}
-
-	100% {
-		transform: rotate(180deg);
+/* windows high contrast mode */
+@media (forced-colors: active) {
+	.spectrum-ProgressCircle {
+		/* fill is bright color */
+		--highcontrast-progress-circle-fill-border-color: Highlight;
+		--highcontrast-progress-circle-track-color: Background;
 	}
-}
 
-@keyframes spectrum-fills-rotate {
-	0% {
-		transform: rotate(-90deg);
-	}
+	.spectrum-ProgressCircle:not(.spectrum-ProgressCircle--indeterminate) {
+		.spectrum-innerCircle {
+			stroke: CanvasText;
+		}
 
-	100% {
-		transform: rotate(270deg);
+		.spectrum-outerCircle {
+			border: 1px solid;
+			border-color: CanvasText;
+			border-radius: 50%;
+		}
 	}
 }
diff --git a/components/progresscircle/stories/progresscircle.stories.js b/components/progresscircle/stories/progresscircle.stories.js
index f64c2f2780a..ac3f3111330 100644
--- a/components/progresscircle/stories/progresscircle.stories.js
+++ b/components/progresscircle/stories/progresscircle.stories.js
@@ -15,16 +15,21 @@ export default {
 	argTypes: {
 		size: size(["s", "m", "l"]),
 		isIndeterminate,
-		staticColor: {
-			...staticColor,
-			options: ["white"],
-		},
+		staticColor,
+		value: {
+			control: {
+				type: "range",
+				min: 0,
+				max: 100
+			}
+		}
 	},
 	args: {
 		rootClass: "spectrum-ProgressCircle",
 		size: "m",
 		isIndeterminate: false,
 		staticColor: undefined,
+		value: 43
 	},
 	parameters: {
 		design: {
@@ -102,3 +107,25 @@ StaticWhiteIndeterminate.args = {
 StaticWhiteIndeterminate.parameters = {
 	chromatic: { disableSnapshot: true },
 };
+
+export const StaticBlackDeterminate = Sizing.bind({});
+StaticBlackDeterminate.tags = ["!dev"];
+StaticBlackDeterminate.storyName = "Static black, default";
+StaticBlackDeterminate.args = {
+	staticColor: "black",
+	isIndeterminate: false,
+};
+StaticBlackDeterminate.parameters = {
+	chromatic: { disableSnapshot: true },
+};
+
+export const StaticBlackIndeterminate = Sizing.bind({});
+StaticBlackIndeterminate.tags = ["!dev"];
+StaticBlackIndeterminate.storyName = "Static black, indeterminate";
+StaticBlackIndeterminate.args = {
+	staticColor: "black",
+	isIndeterminate: true,
+};
+StaticBlackIndeterminate.parameters = {
+	chromatic: { disableSnapshot: true },
+};
diff --git a/components/progresscircle/stories/progresscircle.test.js b/components/progresscircle/stories/progresscircle.test.js
index 26c9d8e078c..83fe05791dc 100644
--- a/components/progresscircle/stories/progresscircle.test.js
+++ b/components/progresscircle/stories/progresscircle.test.js
@@ -11,6 +11,10 @@ export const ProgressCircleGroup = Variants({
 			testHeading: "Static white",
 			staticColor: "white",
 		},
+		{
+			testHeading: "Static black",
+			staticColor: "black",
+		},
 	],
 	stateData: [
 		{
diff --git a/components/progresscircle/stories/template.js b/components/progresscircle/stories/template.js
index 8fbb22aa461..1890e58d4b0 100644
--- a/components/progresscircle/stories/template.js
+++ b/components/progresscircle/stories/template.js
@@ -4,6 +4,8 @@ import { classMap } from "lit/directives/class-map.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { styleMap } from "lit/directives/style-map.js";
 
+import { capitalize } from "lodash-es";
+
 import "../index.css";
 
 export const Template = ({
@@ -15,45 +17,48 @@ export const Template = ({
 	size = "m",
 	staticColor,
 	isIndeterminate = false,
-} = {}) => {
-	let sizeClassName = "medium";
-	switch (size) {
-		case "s":
-			sizeClassName = "small";
-			break;
-		case "l":
-			sizeClassName = "large";
-			break;
-		default:
-			sizeClassName = "medium";
-	}
+	value,
+}) => {
+
+	let strokeWidth = size === "s" ? 2 : size === "l" ? 4 : 3;
+
+	// SVG strokes are centered, so subtract half the stroke width from the radius to create an inner stroke.
+	let radius = `calc(50% - ${strokeWidth / 2}px)`;
+
+	let insideRadius = `calc(50% - ${strokeWidth / 1}px)`;
 
 	return html`
 		<div
 			class=${classMap({
 				[rootClass]: true,
-				[`${rootClass}--${sizeClassName}`]: typeof size !== "undefined",
 				[`${rootClass}--indeterminate`]: isIndeterminate,
-				[`${rootClass}--staticWhite`]: staticColor === "white",
+				[`${rootClass}--static${capitalize(staticColor)}`]: typeof staticColor !== "undefined",
+				[`${rootClass}--size${size?.toUpperCase()}`]: typeof size !== "undefined" && size !== "m",
 				...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
 			})}
 			id=${ifDefined(id)}
 			style=${styleMap(customStyles)}
 			data-testid=${ifDefined(testId)}
 		>
-			<div class="spectrum-ProgressCircle-track"></div>
-			<div class="spectrum-ProgressCircle-fills">
-				<div class="spectrum-ProgressCircle-fillMask1">
-					<div class="spectrum-ProgressCircle-fillSubMask1">
-						<div class="spectrum-ProgressCircle-fill"></div>
-					</div>
-				</div>
-				<div class="spectrum-ProgressCircle-fillMask2">
-					<div class="spectrum-ProgressCircle-fillSubMask2">
-						<div class="spectrum-ProgressCircle-fill"></div>
-					</div>
-				</div>
-			</div>
+			<svg fill="none" width="100%" height="100%" class="spectrum-outerCircle">
+				<circle class="spectrum-innerCircle" cx="50%" cy="50%" r=${insideRadius} stroke-width="2" />
+				<circle
+					cx="50%"
+					cy="50%"
+					class="spectrum-ProgressCircle-track"
+					r=${radius}
+				/>
+				<circle
+					cx="50%"
+					cy="50%"
+					r=${radius}
+					class="spectrum-ProgressCircle-fill"
+					pathLength="100"
+					stroke-dasharray="100 200"
+					stroke-dashoffset=${100 - value}
+					stroke-linecap="round"
+				/>
+			</svg>
 		</div>
 	`;
 };