diff --git a/libs/components/src/progress/progress.component.html b/libs/components/src/progress/progress.component.html
index 2637f23eee..5fa71efb05 100644
--- a/libs/components/src/progress/progress.component.html
+++ b/libs/components/src/progress/progress.component.html
@@ -5,7 +5,7 @@
aria-valuemin="0"
aria-valuemax="100"
attr.aria-valuenow="{{ barWidth }}"
- [ngStyle]="{ width: barWidth + '%' }"
+ [ngStyle]="{ width: barWidthPercentage + '%' }"
>
this.minWidth ? this.barWidth : this.minWidth;
+ }
+
get outerBarStyles() {
return ["tw-overflow-hidden", "tw-rounded", "tw-bg-secondary-100"].concat(
SizeClasses[this.size]
diff --git a/libs/components/src/progress/progress.stories.ts b/libs/components/src/progress/progress.stories.ts
index 49a5398d2d..b5208e5cc4 100644
--- a/libs/components/src/progress/progress.stories.ts
+++ b/libs/components/src/progress/progress.stories.ts
@@ -15,6 +15,7 @@ export default {
showText: true,
size: "default",
bgColor: "primary",
+ minWidth: 0,
},
} as Meta;
@@ -38,3 +39,10 @@ export const CustomText: Story = {
text: "Loading...",
},
};
+
+export const MinWidth: Story = {
+ args: {
+ barWidth: 0,
+ minWidth: 5,
+ },
+};