Merge pull request #1003 from OutSystems/ROU-11384

ROU-11384: Adding new css variables to control progress animation speed
OutSystems · Dec 2, 2024 · ee060ac · ee060ac
2 parents ac07433 + ea93c2d
commit ee060ac
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 4 deletions.
diff --git a/src/scripts/OSFramework/OSUI/Pattern/Progress/Bar/scss/_progressbar.scss b/src/scripts/OSFramework/OSUI/Pattern/Progress/Bar/scss/_progressbar.scss
@@ -25,12 +25,12 @@
 
 			&.animate {
 				&-entrance .osui-progress-bar__value:before {
-					transition-delay: 0.5s;
+					transition-delay: var(--progress-initial-speed, 0.5s);
 				}
 				&-entrance,
 				&-progress-change {
 					.osui-progress-bar__value:before {
-						transition-duration: 0.35s;
+						transition-duration: var(--progress-speed, 0.35s);
 					}
 				}
 			}

diff --git a/src/scripts/OSFramework/OSUI/Pattern/Progress/Circle/scss/_progresscircle.scss b/src/scripts/OSFramework/OSUI/Pattern/Progress/Circle/scss/_progresscircle.scss
@@ -53,11 +53,11 @@
 			&.animate {
 				&-entrance,
 				&-progress-change {
-					transition-duration: 0.35s;
+					transition-duration: var(--progress-speed, 0.35s);
 				}
 
 				&-entrance {
-					transition-delay: 0.5s;
+					transition-delay: var(--progress-initial-speed, 0.5s);
 				}
 			}
 		}

diff --git a/src/scripts/OSFramework/OSUI/Pattern/Progress/ProgressEnum.ts b/src/scripts/OSFramework/OSUI/Pattern/Progress/ProgressEnum.ts
@@ -24,6 +24,8 @@ namespace OSFramework.OSUI.Patterns.Progress.ProgressEnum {
 		ProgressColor = '--progress-color',
 		ProgressValue = '--progress-value',
 		ProgressGradient = '--progress-gradient',
+		ProgressInitialSpeed = '--progress-initial-speed',
+		ProgressSpeed = '--progress-speed',
 		Shape = '--shape',
 		Thickness = '--thickness',
 		TrailColor = '--trail-color',