diff --git a/docs/content/1.getting-started/3.theme.md b/docs/content/1.getting-started/3.theme.md
index 391bad0216..561e8f9280 100644
--- a/docs/content/1.getting-started/3.theme.md
+++ b/docs/content/1.getting-started/3.theme.md
@@ -750,8 +750,12 @@ This is how the `@theme` is generated for each design token:
   --outline-color-default: var(--ui-border);
   --outline-color-inverted: var(--ui-border-inverted);
   --stroke-color-default: var(--ui-border);
+  --stroke-color-muted: var(--ui-border-muted);
+  --stroke-color-accented: var(--ui-border-accented);
   --stroke-color-inverted: var(--ui-border-inverted);
   --fill-color-default: var(--ui-border);
+  --fill-color-muted: var(--ui-border-muted);
+  --fill-color-accented: var(--ui-border-accented);
   --fill-color-inverted: var(--ui-border-inverted);
 }
 ```
diff --git a/docs/content/3.components/progress.md b/docs/content/3.components/progress.md
index 5156735bb7..a14f48a4cb 100644
--- a/docs/content/3.components/progress.md
+++ b/docs/content/3.components/progress.md
@@ -57,6 +57,20 @@ props:
 ---
 ::
 
+### Variant
+
+Use the `variant` prop to change the style of the Progress. Defaults to `linear`.
+
+::component-code
+---
+external:
+  - modelValue
+props:
+  modelValue: 50
+  variant: linear
+---
+::
+
 ### Status
 
 Use the `status` prop to display the current Progress value above the bar.
@@ -71,6 +85,22 @@ props:
 ---
 ::
 
+### Status Position
+
+Use the `status-position` prop to define where the status text is displayed. Defaults to `outside`.
+
+::component-code
+---
+external:
+  - modelValue
+props:
+  modelValue: 50
+  variant: circular
+  status: true
+  statusPosition: 'inside'
+---
+::
+
 ### Indeterminate
 
 When no `v-model` is set or the value is `null`, the Progress becomes _indeterminate_. The progress bar is animated as a `carousel`, but you can change it using the [`animation`](#animation) prop.
diff --git a/playground/app/pages/components/progress.vue b/playground/app/pages/components/progress.vue
index 46a4a5d444..88d4f907d8 100644
--- a/playground/app/pages/components/progress.vue
+++ b/playground/app/pages/components/progress.vue
@@ -58,6 +58,7 @@ onMounted(() => {
         :max="max"
         status
         inverted
+        color="warning"
         class="w-48 justify-start"
       />
     </div>
@@ -65,5 +66,70 @@ onMounted(() => {
     <div class="h-48 flex items-center gap-8">
       <UProgress v-for="size in sizes" :key="size" v-model="value1" orientation="vertical" :size="size" />
     </div>
+
+    <div class="flex items-center gap-4">
+      <UProgress
+        v-model="value2"
+        variant="circular"
+        color="warning"
+        size="2xs"
+        status
+      />
+
+      <UProgress
+        v-model="value2"
+        variant="circular"
+        size="xs"
+        color="neutral"
+      />
+
+      <UProgress
+        v-model="value2"
+        variant="circular"
+        color="warning"
+        size="sm"
+        status
+      />
+
+      <UProgress
+        v-model="value2"
+        variant="circular"
+        color="warning"
+        size="md"
+        status
+      />
+
+      <UProgress
+        v-model="value2"
+        variant="circular"
+        color="warning"
+        size="lg"
+        status
+      />
+
+      <UProgress
+        v-model="value2"
+        variant="circular"
+        color="warning"
+        status-position="inside"
+        size="xl"
+        status
+      />
+
+      <UProgress
+        v-model="value2"
+        color="error"
+        status
+        size="2xl"
+        variant="circular"
+      >
+        <template #status="{ percent }">
+          <div class="flex flex-col items-center">
+            <span class="font-bold">{{ percent }}%</span>
+            <span class="text-sm text-gray-500">Loading...</span>
+          </div>
+        </template>
+      </UProgress>
+    </div>
   </div>
 </template>
diff --git a/src/runtime/components/Progress.vue b/src/runtime/components/Progress.vue
index 51541ac156..c751eae762 100644
--- a/src/runtime/components/Progress.vue
+++ b/src/runtime/components/Progress.vue
@@ -17,6 +17,11 @@ export interface ProgressProps extends Pick<ProgressRootProps, 'getValueLabel' |
   max?: number | Array<any>
   /** Display the current progress value. */
   status?: boolean
+  /**
+   * The position of the status text.
+   * @defaultValue 'outside'
+   */
+  statusPosition?: 'inside' | 'outside'
   /** Whether the progress is visually inverted. */
   inverted?: boolean
   /**
@@ -37,6 +42,11 @@ export interface ProgressProps extends Pick<ProgressRootProps, 'getValueLabel' |
    * @defaultValue 'carousel'
    */
   animation?: Progress['variants']['animation']
+  /**
+   * The variants of the progress bar.
+   * @defaultValue 'linear'
+   */
+  variant?: Progress['variants']['variant']
   class?: any
   ui?: Progress['slots']
 }
@@ -62,7 +72,9 @@ import { tv } from '../utils/tv'
 const props = withDefaults(defineProps<ProgressProps>(), {
   inverted: false,
   modelValue: null,
-  orientation: 'horizontal'
+  orientation: 'horizontal',
+  variant: 'linear',
+  statusPosition: 'outside'
 })
 const emits = defineEmits<ProgressEmits>()
 const slots = defineSlots<ProgressSlots>()
@@ -72,6 +84,9 @@ const appConfig = useAppConfig() as Progress['AppConfig']
 
 const rootProps = useForwardPropsEmits(reactivePick(props, 'getValueLabel', 'modelValue'), emits)
 
+const RADIUS = 40
+const circumference = 2 * Math.PI * RADIUS
+
 const isIndeterminate = computed(() => rootProps.value.modelValue === null)
 const hasSteps = computed(() => Array.isArray(props.max))
 
@@ -99,7 +114,23 @@ const percent = computed(() => {
   }
 })
 
+const dashOffset = computed(() =>
+  ((percent.value || 0) / 100) * circumference
+)
+const trackPath = computed(() => {
+  const r = RADIUS
+  return `
+          M 50 50
+          m 0 -${r}
+          a ${r} ${r} 0 1 1 0 ${r * 2}
+          a ${r} ${r} 0 1 1 0 -${r * 2}
+          `
+})
+
 const indicatorStyle = computed(() => {
+  if (props.variant === 'circular') {
+    return
+  }
   if (percent.value === undefined) {
     return
   }
@@ -123,7 +154,7 @@ const indicatorStyle = computed(() => {
 
 const statusStyle = computed(() => {
   return {
-    [props.orientation === 'vertical' ? 'height' : 'width']: percent.value ? `${percent.value}%` : 'fit-content'
+    [props.orientation === 'vertical' ? 'height' : 'width']: percent.value && (props.variant === 'linear') ? `${percent.value}%` : 'fit-content'
   }
 })
 
@@ -162,20 +193,50 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.progress ||
   size: props.size,
   color: props.color,
   orientation: props.orientation,
-  inverted: props.inverted
+  inverted: props.inverted,
+  variant: props.variant,
+  statusPosition: props.statusPosition
 }))
 </script>
 
 <template>
   <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
-    <div v-if="!isIndeterminate && (status || !!slots.status)" :class="ui.status({ class: props.ui?.status })" :style="statusStyle">
+    <div v-if="!isIndeterminate && (variant !== 'circular' || statusPosition === 'outside') && (status || !!slots.status)" :class="ui.status({ class: props.ui?.status })" :style="statusStyle">
       <slot name="status" :percent="percent">
         {{ percent }}%
       </slot>
     </div>
 
     <ProgressRoot v-bind="rootProps" :max="realMax" :class="ui.base({ class: props.ui?.base })" style="transform: translateZ(0)">
-      <ProgressIndicator :class="ui.indicator({ class: props.ui?.indicator })" :style="indicatorStyle" />
+      <ProgressIndicator v-if="variant === 'linear'" :class="ui.indicator({ class: props.ui?.indicator })" :style="indicatorStyle" />
+      <template v-else-if="variant === 'circular'">
+        <svg
+          :class="ui.base({ class: props.ui?.base })"
+          viewBox="0 0 100 100"
+        >
+          <path
+            :d="trackPath"
+            :class="ui.track({ class: props.ui?.track })"
+          />
+          <ProgressIndicator as-child>
+            <path
+              v-if="percent && percent > 0"
+              :d="trackPath"
+              :class="ui.indicator({ class: props.ui?.indicator })"
+              :style="{
+                'stroke-linecap': 'round',
+                'stroke-dasharray': `${dashOffset}px, ${circumference}px`,
+                'stroke-dashoffset': '0px'
+              }"
+            />
+          </ProgressIndicator>
+        </svg>
+        <div v-if="!isIndeterminate && variant === 'circular' && statusPosition === 'inside' && (status || !!slots.status)" :class="ui.status({ class: props.ui?.status })">
+          <slot name="status" :percent="percent">
+            {{ percent }}%
+          </slot>
+        </div>
+      </template>
     </ProgressRoot>
 
     <div v-if="hasSteps" :class="ui.steps({ class: props.ui?.steps })">
diff --git a/src/templates.ts b/src/templates.ts
index 99c7c92760..548879ba54 100644
--- a/src/templates.ts
+++ b/src/templates.ts
@@ -132,8 +132,12 @@ export function getTemplates(options: ModuleOptions, uiConfig: Record<string, an
   --outline-color-default: var(--ui-border);
   --outline-color-inverted: var(--ui-border-inverted);
   --stroke-default: var(--ui-border);
+  --stroke-muted: var(--ui-border-muted);
+  --stroke-accented: var(--ui-border-accented);
   --stroke-inverted: var(--ui-border-inverted);
   --fill-default: var(--ui-border);
+  --fill-muted: var(--ui-border-muted);
+  --fill-accented: var(--ui-border-accented);
   --fill-inverted: var(--ui-border-inverted);
 }
 `
diff --git a/src/theme/progress.ts b/src/theme/progress.ts
index 08a7460484..dfabd00e81 100644
--- a/src/theme/progress.ts
+++ b/src/theme/progress.ts
@@ -3,13 +3,30 @@ import type { ModuleOptions } from '../module'
 export default (options: Required<ModuleOptions>) => ({
   slots: {
     root: 'gap-2',
-    base: 'relative overflow-hidden rounded-full bg-accented',
+    base: 'relative',
+    track: '',
     indicator: 'rounded-full size-full transition-transform duration-200 ease-out',
     status: 'flex justify-end text-dimmed transition-[width] duration-200',
     steps: 'grid items-end',
     step: 'truncate text-end row-start-1 col-start-1 transition-opacity'
   },
   variants: {
+    variant: {
+      linear: {
+        base: 'overflow-hidden rounded-full bg-accented'
+      },
+      circular: {
+        root: 'gap-0 items-center',
+        base: 'relative rounded-full',
+        track: 'fill-none stroke-accented',
+        indicator: 'fill-none transition-[stroke-dasharray,opacity]',
+        status: 'flex items-center justify-center'
+      }
+    },
+    statusPosition: {
+      inside: {},
+      outside: {}
+    },
     animation: {
       'carousel': '',
       'carousel-inverse': '',
@@ -18,12 +35,14 @@ export default (options: Required<ModuleOptions>) => ({
     },
     color: {
       ...Object.fromEntries((options.theme.colors || []).map((color: string) => [color, {
-        indicator: `bg-${color}`,
-        steps: `text-${color}`
+        indicator: `bg-${color} stroke-${color}`,
+        steps: `text-${color}`,
+        track: 'stroke-accented'
       }])),
       neutral: {
-        indicator: 'bg-inverted',
-        steps: 'text-inverted'
+        indicator: 'bg-inverted stroke-inverted',
+        steps: 'text-inverted',
+        track: 'stroke-accented'
       }
     },
     size: {
@@ -89,6 +108,82 @@ export default (options: Required<ModuleOptions>) => ({
     }
   },
   compoundVariants: [{
+    variant: 'circular',
+    statusPosition: 'inside',
+    class: {
+      status: 'absolute inset-0'
+    }
+  },
+  {
+    variant: 'circular',
+    class: {
+      base: 'rounded-full'
+    }
+  },
+  {
+    variant: 'circular',
+    size: '2xs',
+    class: {
+      base: 'size-6',
+      indicator: 'stroke-[6px]',
+      track: 'stroke-[6px]'
+    }
+  },
+  {
+    variant: 'circular',
+    size: 'xs',
+    class: {
+      base: 'size-8',
+      indicator: 'stroke-[8px]',
+      track: 'stroke-[8px]'
+    }
+  },
+  {
+    variant: 'circular',
+    size: 'sm',
+    class: {
+      base: 'size-10',
+      indicator: 'stroke-[10px]',
+      track: 'stroke-[10px]'
+    }
+  },
+  {
+    variant: 'circular',
+    size: 'md',
+    class: {
+      base: 'size-14',
+      indicator: 'stroke-[14px]',
+      track: 'stroke-[14px]'
+    }
+  },
+  {
+    variant: 'circular',
+    size: 'lg',
+    class: {
+      base: 'size-16',
+      indicator: 'stroke-[16px]',
+      track: 'stroke-[16px]'
+    }
+  },
+  {
+    variant: 'circular',
+    size: 'xl',
+    class: {
+      base: 'size-18',
+      indicator: 'stroke-[18px]',
+      track: 'stroke-[18px]'
+    }
+  },
+  {
+    variant: 'circular',
+    size: '2xl',
+    class: {
+      base: 'size-20',
+      indicator: 'stroke-[20px]',
+      track: 'stroke-[20px]'
+    }
+  }, {
+    variant: 'linear',
     inverted: true,
     orientation: 'horizontal',
     class: {
@@ -96,6 +191,7 @@ export default (options: Required<ModuleOptions>) => ({
       status: 'flex-row-reverse'
     }
   }, {
+    variant: 'linear',
     inverted: true,
     orientation: 'vertical',
     class: {
@@ -103,104 +199,126 @@ export default (options: Required<ModuleOptions>) => ({
       status: 'flex-col-reverse'
     }
   }, {
+    variant: 'linear',
     orientation: 'horizontal',
     size: '2xs',
     class: 'h-px'
   }, {
+    variant: 'linear',
     orientation: 'horizontal',
     size: 'xs',
     class: 'h-0.5'
   }, {
+    variant: 'linear',
     orientation: 'horizontal',
     size: 'sm',
     class: 'h-1'
   }, {
+    variant: 'linear',
     orientation: 'horizontal',
     size: 'md',
     class: 'h-2'
   }, {
+    variant: 'linear',
     orientation: 'horizontal',
     size: 'lg',
     class: 'h-3'
   }, {
+    variant: 'linear',
     orientation: 'horizontal',
     size: 'xl',
     class: 'h-4'
   }, {
+    variant: 'linear',
     orientation: 'horizontal',
     size: '2xl',
     class: 'h-5'
   }, {
+    variant: 'linear',
     orientation: 'vertical',
     size: '2xs',
     class: 'w-px'
   }, {
+    variant: 'linear',
     orientation: 'vertical',
     size: 'xs',
     class: 'w-0.5'
   }, {
+    variant: 'linear',
     orientation: 'vertical',
     size: 'sm',
     class: 'w-1'
   }, {
+    variant: 'linear',
     orientation: 'vertical',
     size: 'md',
     class: 'w-2'
   }, {
+    variant: 'linear',
     orientation: 'vertical',
     size: 'lg',
     class: 'w-3'
   }, {
+    variant: 'linear',
     orientation: 'vertical',
     size: 'xl',
     class: 'w-4'
   }, {
+    variant: 'linear',
     orientation: 'vertical',
     size: '2xl',
     class: 'w-5'
   }, {
+    variant: 'linear',
     orientation: 'horizontal',
     animation: 'carousel',
     class: {
       indicator: 'data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]'
     }
   }, {
+    variant: 'linear',
     orientation: 'vertical',
     animation: 'carousel',
     class: {
       indicator: 'data-[state=indeterminate]:animate-[carousel-vertical_2s_ease-in-out_infinite]'
     }
   }, {
+    variant: 'linear',
     orientation: 'horizontal',
     animation: 'carousel-inverse',
     class: {
       indicator: 'data-[state=indeterminate]:animate-[carousel-inverse_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-inverse-rtl_2s_ease-in-out_infinite]'
     }
   }, {
+    variant: 'linear',
     orientation: 'vertical',
     animation: 'carousel-inverse',
     class: {
       indicator: 'data-[state=indeterminate]:animate-[carousel-inverse-vertical_2s_ease-in-out_infinite]'
     }
   }, {
+    variant: 'linear',
     orientation: 'horizontal',
     animation: 'swing',
     class: {
       indicator: 'data-[state=indeterminate]:animate-[swing_2s_ease-in-out_infinite]'
     }
   }, {
+    variant: 'linear',
     orientation: 'vertical',
     animation: 'swing',
     class: {
       indicator: 'data-[state=indeterminate]:animate-[swing-vertical_2s_ease-in-out_infinite]'
     }
   }, {
+    variant: 'linear',
     orientation: 'horizontal',
     animation: 'elastic',
     class: {
       indicator: 'data-[state=indeterminate]:animate-[elastic_2s_ease-in-out_infinite]'
     }
   }, {
+    variant: 'linear',
     orientation: 'vertical',
     animation: 'elastic',
     class: {
@@ -208,8 +326,10 @@ export default (options: Required<ModuleOptions>) => ({
     }
   }],
   defaultVariants: {
+    variant: 'linear',
     animation: 'carousel',
     color: 'primary',
-    size: 'md'
+    size: 'md',
+    statusPosition: 'outside'
   }
 })
diff --git a/test/components/Progress.spec.ts b/test/components/Progress.spec.ts
index aba394deb4..0797df7c13 100644
--- a/test/components/Progress.spec.ts
+++ b/test/components/Progress.spec.ts
@@ -7,6 +7,7 @@ describe('Progress', () => {
   const sizes = Object.keys(theme.variants.size) as any
   const orientations = Object.keys(theme.variants.orientation) as any
   const animations = Object.keys(theme.variants.animation) as any
+  const variants = Object.keys(theme.variants.variant) as any
   const max = ['Waiting...', 'Cloning...', 'Migrating...', 'Deploying...', 'Done!']
 
   it.each([
@@ -14,11 +15,13 @@ describe('Progress', () => {
     ['with modelValue', { props: { modelValue: 50 } }],
     ['with status', { props: { modelValue: 50, status: true } }],
     ['with status inverted', { props: { modelValue: 50, status: true, inverted: true } }],
+    ['with status position and circular variant', { props: { modelValue: 50, status: true, variant: 'circular' } }],
     ['with max', { props: { modelValue: 2, status: true, max } }],
     ['with max inverted', { props: { modelValue: 2, status: true, inverted: true, max } }],
     ...sizes.map((size: string) => [`with size ${size}`, { props: { size } }]),
     ...orientations.map((orientation: string) => [`with orientation ${orientation}`, { props: { orientation } }]),
     ...animations.map((animation: string) => [`with animation ${animation}`, { props: { animation } }]),
+    ...variants.map((variant: string) => [`with variant ${variant}`, { props: { variant } }]),
     ['with color neutral', { props: { color: 'neutral', modelValue: 50 } }],
     ['with as', { props: { as: 'section' } }],
     ['with class', { props: { class: 'w-48' } }],
diff --git a/test/components/__snapshots__/Progress-vue.spec.ts.snap b/test/components/__snapshots__/Progress-vue.spec.ts.snap
index 6bebfe6728..13831978fb 100644
--- a/test/components/__snapshots__/Progress-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Progress-vue.spec.ts.snap
@@ -4,7 +4,7 @@ exports[`Progress > renders with animation carousel correctly 1`] = `
 "<div class="gap-2 w-full flex flex-col">
   <!--v-if-->
   <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
+    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -14,7 +14,7 @@ exports[`Progress > renders with animation carousel-inverse correctly 1`] = `
 "<div class="gap-2 w-full flex flex-col">
   <!--v-if-->
   <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel-inverse_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-inverse-rtl_2s_ease-in-out_infinite]"></div>
+    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel-inverse_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-inverse-rtl_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -24,7 +24,7 @@ exports[`Progress > renders with animation elastic correctly 1`] = `
 "<div class="gap-2 w-full flex flex-col">
   <!--v-if-->
   <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[elastic_2s_ease-in-out_infinite]"></div>
+    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary stroke-primary data-[state=indeterminate]:animate-[elastic_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -34,7 +34,7 @@ exports[`Progress > renders with animation swing correctly 1`] = `
 "<div class="gap-2 w-full flex flex-col">
   <!--v-if-->
   <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[swing_2s_ease-in-out_infinite]"></div>
+    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary stroke-primary data-[state=indeterminate]:animate-[swing_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -44,7 +44,7 @@ exports[`Progress > renders with as correctly 1`] = `
 "<section class="gap-2 w-full flex flex-col">
   <!--v-if-->
   <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
+    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </section>"
@@ -54,7 +54,7 @@ exports[`Progress > renders with class correctly 1`] = `
 "<div class="gap-2 flex flex-col w-48">
   <!--v-if-->
   <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
+    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -64,7 +64,7 @@ exports[`Progress > renders with color neutral correctly 1`] = `
 "<div class="gap-2 w-full flex flex-col">
   <!--v-if-->
   <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" aria-valuetext="50%" aria-label="50%" role="progressbar" data-state="loading" data-value="50" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-2" style="transform: translateZ(0);">
-    <div data-state="loading" data-value="50" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-inverted data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-50%);"></div>
+    <div data-state="loading" data-value="50" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-inverted stroke-inverted data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-50%);"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -74,7 +74,7 @@ exports[`Progress > renders with max correctly 1`] = `
 "<div class="gap-2 w-full flex flex-col">
   <div class="flex justify-end text-dimmed transition-[width] duration-200 text-sm flex-row" style="width: 50%;">50% </div>
   <div aria-valuemax="4" aria-valuemin="0" aria-valuenow="2" aria-valuetext="50%" aria-label="50%" role="progressbar" data-state="loading" data-value="2" data-max="4" class="relative overflow-hidden rounded-full bg-accented w-full h-2" style="transform: translateZ(0);">
-    <div data-state="loading" data-value="2" data-max="4" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-50%);"></div>
+    <div data-state="loading" data-value="2" data-max="4" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-50%);"></div>
   </div>
   <div class="grid items-end text-primary text-sm">
     <div class="truncate text-end row-start-1 col-start-1 transition-opacity opacity-0">Waiting...</div>
@@ -90,7 +90,7 @@ exports[`Progress > renders with max inverted correctly 1`] = `
 "<div class="gap-2 w-full flex flex-col">
   <div class="flex justify-end text-dimmed transition-[width] duration-200 text-sm self-end flex-row-reverse" style="width: 50%;">50% </div>
   <div aria-valuemax="4" aria-valuemin="0" aria-valuenow="2" aria-valuetext="50%" aria-label="50%" role="progressbar" data-state="loading" data-value="2" data-max="4" class="relative overflow-hidden rounded-full bg-accented w-full h-2" style="transform: translateZ(0);">
-    <div data-state="loading" data-value="2" data-max="4" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(50%);"></div>
+    <div data-state="loading" data-value="2" data-max="4" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(50%);"></div>
   </div>
   <div class="grid items-end text-primary text-sm">
     <div class="truncate row-start-1 col-start-1 transition-opacity opacity-0 text-start">Waiting...</div>
@@ -106,7 +106,7 @@ exports[`Progress > renders with modelValue correctly 1`] = `
 "<div class="gap-2 w-full flex flex-col">
   <!--v-if-->
   <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" aria-valuetext="50%" aria-label="50%" role="progressbar" data-state="loading" data-value="50" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-2" style="transform: translateZ(0);">
-    <div data-state="loading" data-value="50" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-50%);"></div>
+    <div data-state="loading" data-value="50" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-50%);"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -116,7 +116,7 @@ exports[`Progress > renders with orientation horizontal correctly 1`] = `
 "<div class="gap-2 w-full flex flex-col">
   <!--v-if-->
   <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
+    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -126,7 +126,7 @@ exports[`Progress > renders with orientation vertical correctly 1`] = `
 "<div class="gap-2 h-full flex flex-row-reverse">
   <!--v-if-->
   <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-accented h-full w-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel-vertical_2s_ease-in-out_infinite]"></div>
+    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel-vertical_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -136,7 +136,7 @@ exports[`Progress > renders with size 2xl correctly 1`] = `
 "<div class="gap-2 w-full flex flex-col">
   <!--v-if-->
   <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-5" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
+    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -146,7 +146,7 @@ exports[`Progress > renders with size 2xs correctly 1`] = `
 "<div class="gap-2 w-full flex flex-col">
   <!--v-if-->
   <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-px" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
+    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -156,7 +156,7 @@ exports[`Progress > renders with size lg correctly 1`] = `
 "<div class="gap-2 w-full flex flex-col">
   <!--v-if-->
   <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-3" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
+    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -166,7 +166,7 @@ exports[`Progress > renders with size md correctly 1`] = `
 "<div class="gap-2 w-full flex flex-col">
   <!--v-if-->
   <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
+    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -176,7 +176,7 @@ exports[`Progress > renders with size sm correctly 1`] = `
 "<div class="gap-2 w-full flex flex-col">
   <!--v-if-->
   <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
+    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -186,7 +186,7 @@ exports[`Progress > renders with size xl correctly 1`] = `
 "<div class="gap-2 w-full flex flex-col">
   <!--v-if-->
   <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-4" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
+    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -196,7 +196,7 @@ exports[`Progress > renders with size xs correctly 1`] = `
 "<div class="gap-2 w-full flex flex-col">
   <!--v-if-->
   <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-0.5" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
+    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -206,7 +206,7 @@ exports[`Progress > renders with status correctly 1`] = `
 "<div class="gap-2 w-full flex flex-col">
   <div class="flex justify-end text-dimmed transition-[width] duration-200 text-sm flex-row" style="width: 50%;">50% </div>
   <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" aria-valuetext="50%" aria-label="50%" role="progressbar" data-state="loading" data-value="50" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-2" style="transform: translateZ(0);">
-    <div data-state="loading" data-value="50" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-50%);"></div>
+    <div data-state="loading" data-value="50" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-50%);"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -216,7 +216,30 @@ exports[`Progress > renders with status inverted correctly 1`] = `
 "<div class="gap-2 w-full flex flex-col">
   <div class="flex justify-end text-dimmed transition-[width] duration-200 text-sm self-end flex-row-reverse" style="width: 50%;">50% </div>
   <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" aria-valuetext="50%" aria-label="50%" role="progressbar" data-state="loading" data-value="50" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-2" style="transform: translateZ(0);">
-    <div data-state="loading" data-value="50" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(50%);"></div>
+    <div data-state="loading" data-value="50" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(50%);"></div>
+  </div>
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Progress > renders with status position and circular variant correctly 1`] = `
+"<div class="gap-0 items-center w-full flex flex-col">
+  <div class="text-dimmed transition-[width] duration-200 flex items-center justify-center text-sm flex-row" style="width: fit-content;">50% </div>
+  <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" aria-valuetext="50%" aria-label="50%" role="progressbar" data-state="loading" data-value="50" data-max="100" class="relative rounded-full size-14" style="transform: translateZ(0);"><svg class="relative rounded-full size-14" viewBox="0 0 100 100">
+      <path d="
+          M 50 50
+          m 0 -40
+          a 40 40 0 1 1 0 80
+          a 40 40 0 1 1 0 -80
+          " class="fill-none stroke-accented stroke-[14px]"></path>
+      <path d="
+          M 50 50
+          m 0 -40
+          a 40 40 0 1 1 0 80
+          a 40 40 0 1 1 0 -80
+          " class="rounded-full size-full duration-200 ease-out fill-none transition-[stroke-dasharray,opacity] bg-primary stroke-primary stroke-[14px]" style="stroke-linecap: round; stroke-dasharray: 125.66370614359172px, 251.32741228718345px; stroke-dashoffset: 0px;" data-state="loading" data-value="50" data-max="100"></path>
+    </svg>
+    <!--v-if-->
   </div>
   <!--v-if-->
 </div>"
@@ -226,7 +249,7 @@ exports[`Progress > renders with status slot correctly 1`] = `
 "<div class="gap-2 w-full flex flex-col">
   <!--v-if-->
   <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
+    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -236,7 +259,34 @@ exports[`Progress > renders with ui correctly 1`] = `
 "<div class="gap-2 w-full flex flex-col">
   <!--v-if-->
   <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full w-full h-2 bg-default" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
+    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
+  </div>
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Progress > renders with variant circular correctly 1`] = `
+"<div class="gap-0 items-center w-full flex flex-col">
+  <!--v-if-->
+  <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative rounded-full size-14" style="transform: translateZ(0);"><svg class="relative rounded-full size-14" viewBox="0 0 100 100">
+      <path d="
+          M 50 50
+          m 0 -40
+          a 40 40 0 1 1 0 80
+          a 40 40 0 1 1 0 -80
+          " class="fill-none stroke-accented stroke-[14px]"></path>
+    </svg>
+    <!--v-if-->
+  </div>
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Progress > renders with variant linear correctly 1`] = `
+"<div class="gap-2 w-full flex flex-col">
+  <!--v-if-->
+  <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-2" style="transform: translateZ(0);">
+    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
diff --git a/test/components/__snapshots__/Progress.spec.ts.snap b/test/components/__snapshots__/Progress.spec.ts.snap
index 6bebfe6728..13831978fb 100644
--- a/test/components/__snapshots__/Progress.spec.ts.snap
+++ b/test/components/__snapshots__/Progress.spec.ts.snap
@@ -4,7 +4,7 @@ exports[`Progress > renders with animation carousel correctly 1`] = `
 "<div class="gap-2 w-full flex flex-col">
   <!--v-if-->
   <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
+    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -14,7 +14,7 @@ exports[`Progress > renders with animation carousel-inverse correctly 1`] = `
 "<div class="gap-2 w-full flex flex-col">
   <!--v-if-->
   <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel-inverse_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-inverse-rtl_2s_ease-in-out_infinite]"></div>
+    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel-inverse_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-inverse-rtl_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -24,7 +24,7 @@ exports[`Progress > renders with animation elastic correctly 1`] = `
 "<div class="gap-2 w-full flex flex-col">
   <!--v-if-->
   <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[elastic_2s_ease-in-out_infinite]"></div>
+    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary stroke-primary data-[state=indeterminate]:animate-[elastic_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -34,7 +34,7 @@ exports[`Progress > renders with animation swing correctly 1`] = `
 "<div class="gap-2 w-full flex flex-col">
   <!--v-if-->
   <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[swing_2s_ease-in-out_infinite]"></div>
+    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary stroke-primary data-[state=indeterminate]:animate-[swing_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -44,7 +44,7 @@ exports[`Progress > renders with as correctly 1`] = `
 "<section class="gap-2 w-full flex flex-col">
   <!--v-if-->
   <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
+    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </section>"
@@ -54,7 +54,7 @@ exports[`Progress > renders with class correctly 1`] = `
 "<div class="gap-2 flex flex-col w-48">
   <!--v-if-->
   <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
+    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -64,7 +64,7 @@ exports[`Progress > renders with color neutral correctly 1`] = `
 "<div class="gap-2 w-full flex flex-col">
   <!--v-if-->
   <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" aria-valuetext="50%" aria-label="50%" role="progressbar" data-state="loading" data-value="50" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-2" style="transform: translateZ(0);">
-    <div data-state="loading" data-value="50" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-inverted data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-50%);"></div>
+    <div data-state="loading" data-value="50" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-inverted stroke-inverted data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-50%);"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -74,7 +74,7 @@ exports[`Progress > renders with max correctly 1`] = `
 "<div class="gap-2 w-full flex flex-col">
   <div class="flex justify-end text-dimmed transition-[width] duration-200 text-sm flex-row" style="width: 50%;">50% </div>
   <div aria-valuemax="4" aria-valuemin="0" aria-valuenow="2" aria-valuetext="50%" aria-label="50%" role="progressbar" data-state="loading" data-value="2" data-max="4" class="relative overflow-hidden rounded-full bg-accented w-full h-2" style="transform: translateZ(0);">
-    <div data-state="loading" data-value="2" data-max="4" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-50%);"></div>
+    <div data-state="loading" data-value="2" data-max="4" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-50%);"></div>
   </div>
   <div class="grid items-end text-primary text-sm">
     <div class="truncate text-end row-start-1 col-start-1 transition-opacity opacity-0">Waiting...</div>
@@ -90,7 +90,7 @@ exports[`Progress > renders with max inverted correctly 1`] = `
 "<div class="gap-2 w-full flex flex-col">
   <div class="flex justify-end text-dimmed transition-[width] duration-200 text-sm self-end flex-row-reverse" style="width: 50%;">50% </div>
   <div aria-valuemax="4" aria-valuemin="0" aria-valuenow="2" aria-valuetext="50%" aria-label="50%" role="progressbar" data-state="loading" data-value="2" data-max="4" class="relative overflow-hidden rounded-full bg-accented w-full h-2" style="transform: translateZ(0);">
-    <div data-state="loading" data-value="2" data-max="4" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(50%);"></div>
+    <div data-state="loading" data-value="2" data-max="4" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(50%);"></div>
   </div>
   <div class="grid items-end text-primary text-sm">
     <div class="truncate row-start-1 col-start-1 transition-opacity opacity-0 text-start">Waiting...</div>
@@ -106,7 +106,7 @@ exports[`Progress > renders with modelValue correctly 1`] = `
 "<div class="gap-2 w-full flex flex-col">
   <!--v-if-->
   <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" aria-valuetext="50%" aria-label="50%" role="progressbar" data-state="loading" data-value="50" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-2" style="transform: translateZ(0);">
-    <div data-state="loading" data-value="50" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-50%);"></div>
+    <div data-state="loading" data-value="50" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-50%);"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -116,7 +116,7 @@ exports[`Progress > renders with orientation horizontal correctly 1`] = `
 "<div class="gap-2 w-full flex flex-col">
   <!--v-if-->
   <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
+    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -126,7 +126,7 @@ exports[`Progress > renders with orientation vertical correctly 1`] = `
 "<div class="gap-2 h-full flex flex-row-reverse">
   <!--v-if-->
   <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-accented h-full w-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel-vertical_2s_ease-in-out_infinite]"></div>
+    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel-vertical_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -136,7 +136,7 @@ exports[`Progress > renders with size 2xl correctly 1`] = `
 "<div class="gap-2 w-full flex flex-col">
   <!--v-if-->
   <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-5" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
+    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -146,7 +146,7 @@ exports[`Progress > renders with size 2xs correctly 1`] = `
 "<div class="gap-2 w-full flex flex-col">
   <!--v-if-->
   <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-px" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
+    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -156,7 +156,7 @@ exports[`Progress > renders with size lg correctly 1`] = `
 "<div class="gap-2 w-full flex flex-col">
   <!--v-if-->
   <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-3" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
+    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -166,7 +166,7 @@ exports[`Progress > renders with size md correctly 1`] = `
 "<div class="gap-2 w-full flex flex-col">
   <!--v-if-->
   <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
+    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -176,7 +176,7 @@ exports[`Progress > renders with size sm correctly 1`] = `
 "<div class="gap-2 w-full flex flex-col">
   <!--v-if-->
   <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
+    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -186,7 +186,7 @@ exports[`Progress > renders with size xl correctly 1`] = `
 "<div class="gap-2 w-full flex flex-col">
   <!--v-if-->
   <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-4" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
+    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -196,7 +196,7 @@ exports[`Progress > renders with size xs correctly 1`] = `
 "<div class="gap-2 w-full flex flex-col">
   <!--v-if-->
   <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-0.5" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
+    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -206,7 +206,7 @@ exports[`Progress > renders with status correctly 1`] = `
 "<div class="gap-2 w-full flex flex-col">
   <div class="flex justify-end text-dimmed transition-[width] duration-200 text-sm flex-row" style="width: 50%;">50% </div>
   <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" aria-valuetext="50%" aria-label="50%" role="progressbar" data-state="loading" data-value="50" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-2" style="transform: translateZ(0);">
-    <div data-state="loading" data-value="50" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-50%);"></div>
+    <div data-state="loading" data-value="50" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-50%);"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -216,7 +216,30 @@ exports[`Progress > renders with status inverted correctly 1`] = `
 "<div class="gap-2 w-full flex flex-col">
   <div class="flex justify-end text-dimmed transition-[width] duration-200 text-sm self-end flex-row-reverse" style="width: 50%;">50% </div>
   <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" aria-valuetext="50%" aria-label="50%" role="progressbar" data-state="loading" data-value="50" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-2" style="transform: translateZ(0);">
-    <div data-state="loading" data-value="50" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(50%);"></div>
+    <div data-state="loading" data-value="50" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(50%);"></div>
+  </div>
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Progress > renders with status position and circular variant correctly 1`] = `
+"<div class="gap-0 items-center w-full flex flex-col">
+  <div class="text-dimmed transition-[width] duration-200 flex items-center justify-center text-sm flex-row" style="width: fit-content;">50% </div>
+  <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" aria-valuetext="50%" aria-label="50%" role="progressbar" data-state="loading" data-value="50" data-max="100" class="relative rounded-full size-14" style="transform: translateZ(0);"><svg class="relative rounded-full size-14" viewBox="0 0 100 100">
+      <path d="
+          M 50 50
+          m 0 -40
+          a 40 40 0 1 1 0 80
+          a 40 40 0 1 1 0 -80
+          " class="fill-none stroke-accented stroke-[14px]"></path>
+      <path d="
+          M 50 50
+          m 0 -40
+          a 40 40 0 1 1 0 80
+          a 40 40 0 1 1 0 -80
+          " class="rounded-full size-full duration-200 ease-out fill-none transition-[stroke-dasharray,opacity] bg-primary stroke-primary stroke-[14px]" style="stroke-linecap: round; stroke-dasharray: 125.66370614359172px, 251.32741228718345px; stroke-dashoffset: 0px;" data-state="loading" data-value="50" data-max="100"></path>
+    </svg>
+    <!--v-if-->
   </div>
   <!--v-if-->
 </div>"
@@ -226,7 +249,7 @@ exports[`Progress > renders with status slot correctly 1`] = `
 "<div class="gap-2 w-full flex flex-col">
   <!--v-if-->
   <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
+    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -236,7 +259,34 @@ exports[`Progress > renders with ui correctly 1`] = `
 "<div class="gap-2 w-full flex flex-col">
   <!--v-if-->
   <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full w-full h-2 bg-default" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
+    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
+  </div>
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Progress > renders with variant circular correctly 1`] = `
+"<div class="gap-0 items-center w-full flex flex-col">
+  <!--v-if-->
+  <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative rounded-full size-14" style="transform: translateZ(0);"><svg class="relative rounded-full size-14" viewBox="0 0 100 100">
+      <path d="
+          M 50 50
+          m 0 -40
+          a 40 40 0 1 1 0 80
+          a 40 40 0 1 1 0 -80
+          " class="fill-none stroke-accented stroke-[14px]"></path>
+    </svg>
+    <!--v-if-->
+  </div>
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Progress > renders with variant linear correctly 1`] = `
+"<div class="gap-2 w-full flex flex-col">
+  <!--v-if-->
+  <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-2" style="transform: translateZ(0);">
+    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"