feat(progress-indicator): transition on value changes (#505)

Trendyol · Mar 30, 2023 · 59ea75b · 59ea75b
1 parent 394367c
commit 59ea75b
Show file tree

Hide file tree

Showing 2 changed files with 2 additions and 0 deletions.
diff --git 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
@@ -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]
  */