From 59ea75be9a86af0158d9524f92214fd319e9c461 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Murat=20=C3=87orlu?=
 <127687+muratcorlu@users.noreply.github.com>
Date: Thu, 30 Mar 2023 15:17:30 +0200
Subject: [PATCH] feat(progress-indicator): transition on value changes (#505)

---
 src/components/progress-indicator/bl-progress-indicator.css | 1 +
 src/components/progress-indicator/bl-progress-indicator.ts  | 1 +
 2 files changed, 2 insertions(+)

diff --git a/src/components/progress-indicator/bl-progress-indicator.css b/src/components/progress-indicator/bl-progress-indicator.css
index 461ff9d5..b6080397 100644
--- a/src/components/progress-indicator/bl-progress-indicator.css
+++ b/src/components/progress-indicator/bl-progress-indicator.css
@@ -19,6 +19,7 @@
   width: calc(100% / var(--max) * var(--value));
   background-color: var(--value-color);
   border-radius: var(--radius);
+  transition: width ease var(--bl-progress-indicator-transition-duration, .2s);
 }
 
 :host([size='small']) .progress-indicator {
diff --git a/src/components/progress-indicator/bl-progress-indicator.ts b/src/components/progress-indicator/bl-progress-indicator.ts
index 8c7333f6..a00aefa1 100644
--- a/src/components/progress-indicator/bl-progress-indicator.ts
+++ b/src/components/progress-indicator/bl-progress-indicator.ts
@@ -8,6 +8,7 @@ export type ProgressIndicatorSize = 'small' | 'medium' | 'large';
  * @tag bl-progress-indicator
  * @summary Baklava Progress Indicator component
  *
+ * @cssproperty [--bl-progress-indicator-transition-duration=.2s] Duration of the transition of progress bar
  * @property {max} [max=100]
  * @property {number} [value=0]
  */