fix(progressbar): give unique names to keyframes animations

desig9stein · desig9stein · commit 9e8d20da15a1 · 2025-01-20T16:40:54.000+02:00
diff --git a/src/components/progress/themes/animations.scss b/src/components/progress/themes/animations.scss
@@ -29,7 +29,7 @@ $easing-curves: (
 }
 
 // Primary animation
-@keyframes indeterminate-primary {
+@keyframes igc-indeterminate-primary {
     0% {
         transform: translateX(0);
     }
@@ -49,7 +49,7 @@ $easing-curves: (
     }
 }
 
-@keyframes indeterminate-primary-scale {
+@keyframes igc-indeterminate-primary-scale {
     0% {
         transform: scaleX(0.08);
     }
@@ -70,7 +70,7 @@ $easing-curves: (
 }
 
 // Secondary animation
-@keyframes indeterminate-secondary {
+@keyframes igc-indeterminate-secondary {
     0% {
         animation-timing-function: timing-function('secondary-translate-start');
         transform: translateX(0);
@@ -91,7 +91,7 @@ $easing-curves: (
     }
 }
 
-@keyframes indeterminate-secondary-scale {
+@keyframes igc-indeterminate-secondary-scale {
     0% {
         animation-timing-function: timing-function('secondary-scale-slow-start');
         transform: scaleX(0.08);
@@ -113,7 +113,7 @@ $easing-curves: (
 }
 
 // Fluent linear animations
-@keyframes indeterminate-bar-fluent {
+@keyframes igc-indeterminate-bar-fluent {
     0% {
         transform: translateX(-100%);
         transform-origin: left;
@@ -125,7 +125,7 @@ $easing-curves: (
     }
 }
 
-@keyframes indeterminate-bar-fluent-rtl {
+@keyframes igc-indeterminate-bar-fluent-rtl {
     0% {
         transform: translateX(100%);
         transform-origin: right;
@@ -138,7 +138,7 @@ $easing-curves: (
 }
 
 // Circular animations
-@keyframes indeterminate-accordion {
+@keyframes igc-indeterminate-accordion {
     0% {
         stroke-dashoffset: calc(#{$circumference} * 2);
         stroke-dasharray: calc(#{$circumference} * 9 / 10);
@@ -149,7 +149,7 @@ $easing-curves: (
     }
 }
 
-@keyframes indeterminate-accordion-rtl {
+@keyframes igc-indeterminate-accordion-rtl {
     0% {
         stroke-dashoffset: calc(#{$circumference} * -2);
         stroke-dasharray: calc(#{$circumference} * 9 / 10);
@@ -162,7 +162,7 @@ $easing-curves: (
 
 // Fluent: Circular progress animation for indeterminate state.
 // Dynamically changes stroke-dasharray and rotates for a smooth spinning effect.
-@keyframes indeterminate-circular-fluent {
+@keyframes igc-indeterminate-circular-fluent {
     0% {
         // Start the stroke at the correct position by adjusting the dasharray and dashoffset
         stroke-dasharray: calc(#{$circumference} * 0.0001), #{$circumference};
@@ -193,7 +193,7 @@ $easing-curves: (
     }
 }
 
-@keyframes indeterminate-circular-fluent-rtl {
+@keyframes igc-indeterminate-circular-fluent-rtl {
     0% {
         stroke-dasharray: calc(#{$circumference} * 0.0001), #{$circumference};
 
@@ -220,7 +220,7 @@ $easing-curves: (
 }
 
 // Generic animations
-@keyframes rotate-center {
+@keyframes igc-rotate-center {
     0% {
         transform: rotate(0);
     }
@@ -230,14 +230,14 @@ $easing-curves: (
     }
 }
 
-@keyframes initial-counter {
+@keyframes igc-initial-counter {
     from {
         --_progress-integer: 0;
         --_progress-fraction: 0;
     }
 }
 
-@keyframes initial-width {
+@keyframes igc-initial-width {
     from {
         width: 0;
     }
@@ -247,7 +247,7 @@ $easing-curves: (
     }
 }
 
-@keyframes initial-dashoffset {
+@keyframes igc-initial-dashoffset {
     from {
         /* Start with no progress (0%) */
         stroke-dashoffset: #{$circumference};
diff --git a/src/components/progress/themes/circular/circular.progress.base.scss b/src/components/progress/themes/circular/circular.progress.base.scss
@@ -30,7 +30,7 @@
 }
 
 [part~='counter'] {
-    animation: initial-counter var(--_transition-duration) ease-in-out;
+    animation: igc-initial-counter var(--_transition-duration) ease-in-out;
     transition:
             --_progress-integer var(--_transition-duration) ease-in-out,
             --_progress-fraction var(--_transition-duration) ease-in-out;
@@ -54,7 +54,7 @@
     transform-origin: center;
 
     &:not([part~='indeterminate']) [part~='fill'] {
-        animation: initial-dashoffset var(--_transition-duration) linear;
+        animation: igc-initial-dashoffset var(--_transition-duration) linear;
         stroke-dasharray: #{$circumference} #{$circumference};
         stroke-dashoffset: calc(#{$circumference} - var(--_progress-percentage) * #{$circumference});
     }
@@ -86,18 +86,18 @@
 
 [part~='svg'][part~='indeterminate'] {
     transform-origin: 50% 50%;
-    animation: 3s linear 0s infinite $animation-direction none running rotate-center;
+    animation: 3s linear 0s infinite $animation-direction none running igc-rotate-center;
 
     [part~='fill'] {
         stroke-dashoffset: calc(#{$circumference} * 2);
-        animation: indeterminate-accordion 1.5s cubic-bezier(0, 0.085, 0.68, 0.53) $animation-direction infinite;
+        animation: igc-indeterminate-accordion 1.5s cubic-bezier(0, 0.085, 0.68, 0.53) $animation-direction infinite;
     }
 }
 
 :host(:dir(rtl)),
 :host([dir='rtl']) {
     [part~='svg'][part~='indeterminate'] [part~='fill'] {
-        animation-name: indeterminate-accordion-rtl;
+        animation-name: igc-indeterminate-accordion-rtl;
     }
 
     [part~='indeterminate'] {
@@ -114,7 +114,7 @@
 
     [part~='svg'] {
         &:not([part~='indeterminate']) [part~='fill'] {
-            animation: initial-dashoffset-rtl var(--_transition-duration) linear;
+            animation: igc-initial-dashoffset var(--_transition-duration) linear;
             stroke-dasharray: #{$circumference} #{$circumference};
             stroke-dashoffset: calc(#{$circumference} + var(--_progress-percentage) * #{$circumference});
         }
diff --git a/src/components/progress/themes/circular/shared/circular.progress.fluent.scss b/src/components/progress/themes/circular/shared/circular.progress.fluent.scss
@@ -27,13 +27,13 @@ $theme: $fluent;
 
     [part~='fill'] {
         stroke-linecap: round;
-        animation: 2s linear 0s infinite normal none running indeterminate-circular-fluent
+        animation: 2s linear 0s infinite normal none running igc-indeterminate-circular-fluent
     }
 }
 
 :host(:dir(rtl)),
 :host([dir='rtl']) {
     [part~='svg'][part~='indeterminate'] [part~='fill'] {
-        animation-name: indeterminate-circular-fluent-rtl;
+        animation-name: igc-indeterminate-circular-fluent-rtl;
     }
 }
diff --git a/src/components/progress/themes/linear/linear.progress.base.scss b/src/components/progress/themes/linear/linear.progress.base.scss
@@ -51,7 +51,7 @@
 
 [part~='fill']:not([part~='indeterminate']) {
     overflow: hidden;
-    animation: initial-width var(--_transition-duration) linear;
+    animation: igc-initial-width var(--_transition-duration) linear;
 }
 
 [part~='indeterminate'],
@@ -74,20 +74,20 @@
 
 [part~='indeterminate']:not([part~='secondary']) {
     transform: scale3d(0, 1, 1);
-    animation: indeterminate-primary var(--linear-animation-duration) infinite linear;
+    animation: igc-indeterminate-primary var(--linear-animation-duration) infinite linear;
     left: -145.1666%;
 
     &::after {
-        animation: indeterminate-primary-scale var(--linear-animation-duration) infinite linear;
+        animation: igc-indeterminate-primary-scale var(--linear-animation-duration) infinite linear;
     }
 }
 
 [part~='secondary'] {
-    animation: indeterminate-secondary var(--linear-animation-duration) infinite linear;
+    animation: igc-indeterminate-secondary var(--linear-animation-duration) infinite linear;
     left: -54.8888%;
 
     &::after {
-        animation: indeterminate-secondary-scale var(--linear-animation-duration) infinite linear;
+        animation: igc-indeterminate-secondary-scale var(--linear-animation-duration) infinite linear;
         width: 100%;
         height: inherit;
     }
@@ -98,7 +98,7 @@
 }
 
 [part~='counter'] {
-    animation: initial-counter var(--_transition-duration) ease-in-out;
+    animation: igc-initial-counter var(--_transition-duration) ease-in-out;
     counter-reset:
             progress-integer var(--_progress-integer, 0)
             progress-fraction var(--_progress-fraction, 0);
diff --git a/src/components/progress/themes/linear/shared/linear.progress.fluent.scss b/src/components/progress/themes/linear/shared/linear.progress.fluent.scss
@@ -17,7 +17,7 @@ $track-color: color(gray, 200);
     }
 
     [part~='indeterminate'] {
-        animation-name: indeterminate-bar-fluent-rtl;
+        animation-name: igc-indeterminate-bar-fluent-rtl;
     }
 }
 
@@ -40,7 +40,7 @@ $track-color: color(gray, 200);
 [part~='indeterminate']:not([part~='secondary']) {
     width: 33% !important;
     min-width: 33%;
-    animation-name: indeterminate-bar-fluent;
+    animation-name: igc-indeterminate-bar-fluent;
     animation-duration: var(--linear-animation-duration);
     animation-timing-function: ease;
     animation-iteration-count: infinite;

Original file line number	Diff line number	Diff line change
`@@ -29,7 +29,7 @@ $easing-curves: (`
`29`	`29`	`}`
`30`	`30`
`31`	`31`	`// Primary animation`
`32`		`-@keyframes indeterminate-primary {`
	`32`	`+@keyframes igc-indeterminate-primary {`
`33`	`33`	`0% {`
`34`	`34`	`transform: translateX(0);`
`35`	`35`	`}`
`@@ -49,7 +49,7 @@ $easing-curves: (`
`49`	`49`	`}`
`50`	`50`	`}`
`51`	`51`
`52`		`-@keyframes indeterminate-primary-scale {`
	`52`	`+@keyframes igc-indeterminate-primary-scale {`
`53`	`53`	`0% {`
`54`	`54`	`transform: scaleX(0.08);`
`55`	`55`	`}`
`@@ -70,7 +70,7 @@ $easing-curves: (`
`70`	`70`	`}`
`71`	`71`
`72`	`72`	`// Secondary animation`
`73`		`-@keyframes indeterminate-secondary {`
	`73`	`+@keyframes igc-indeterminate-secondary {`
`74`	`74`	`0% {`
`75`	`75`	`animation-timing-function: timing-function('secondary-translate-start');`
`76`	`76`	`transform: translateX(0);`
`@@ -91,7 +91,7 @@ $easing-curves: (`
`91`	`91`	`}`
`92`	`92`	`}`
`93`	`93`
`94`		`-@keyframes indeterminate-secondary-scale {`
	`94`	`+@keyframes igc-indeterminate-secondary-scale {`
`95`	`95`	`0% {`
`96`	`96`	`animation-timing-function: timing-function('secondary-scale-slow-start');`
`97`	`97`	`transform: scaleX(0.08);`
`@@ -113,7 +113,7 @@ $easing-curves: (`
`113`	`113`	`}`
`114`	`114`
`115`	`115`	`// Fluent linear animations`
`116`		`-@keyframes indeterminate-bar-fluent {`
	`116`	`+@keyframes igc-indeterminate-bar-fluent {`
`117`	`117`	`0% {`
`118`	`118`	`transform: translateX(-100%);`
`119`	`119`	`transform-origin: left;`
`@@ -125,7 +125,7 @@ $easing-curves: (`
`125`	`125`	`}`
`126`	`126`	`}`
`127`	`127`
`128`		`-@keyframes indeterminate-bar-fluent-rtl {`
	`128`	`+@keyframes igc-indeterminate-bar-fluent-rtl {`
`129`	`129`	`0% {`
`130`	`130`	`transform: translateX(100%);`
`131`	`131`	`transform-origin: right;`
`@@ -138,7 +138,7 @@ $easing-curves: (`
`138`	`138`	`}`
`139`	`139`
`140`	`140`	`// Circular animations`
`141`		`-@keyframes indeterminate-accordion {`
	`141`	`+@keyframes igc-indeterminate-accordion {`
`142`	`142`	`0% {`
`143`	`143`	`stroke-dashoffset: calc(#{$circumference} * 2);`
`144`	`144`	`stroke-dasharray: calc(#{$circumference} * 9 / 10);`
`@@ -149,7 +149,7 @@ $easing-curves: (`
`149`	`149`	`}`
`150`	`150`	`}`
`151`	`151`
`152`		`-@keyframes indeterminate-accordion-rtl {`
	`152`	`+@keyframes igc-indeterminate-accordion-rtl {`
`153`	`153`	`0% {`
`154`	`154`	`stroke-dashoffset: calc(#{$circumference} * -2);`
`155`	`155`	`stroke-dasharray: calc(#{$circumference} * 9 / 10);`
`@@ -162,7 +162,7 @@ $easing-curves: (`
`162`	`162`
`163`	`163`	`// Fluent: Circular progress animation for indeterminate state.`
`164`	`164`	`// Dynamically changes stroke-dasharray and rotates for a smooth spinning effect.`
`165`		`-@keyframes indeterminate-circular-fluent {`
	`165`	`+@keyframes igc-indeterminate-circular-fluent {`
`166`	`166`	`0% {`
`167`	`167`	`// Start the stroke at the correct position by adjusting the dasharray and dashoffset`
`168`	`168`	`stroke-dasharray: calc(#{$circumference} * 0.0001), #{$circumference};`
`@@ -193,7 +193,7 @@ $easing-curves: (`
`193`	`193`	`}`
`194`	`194`	`}`
`195`	`195`
`196`		`-@keyframes indeterminate-circular-fluent-rtl {`
	`196`	`+@keyframes igc-indeterminate-circular-fluent-rtl {`
`197`	`197`	`0% {`
`198`	`198`	`stroke-dasharray: calc(#{$circumference} * 0.0001), #{$circumference};`
`199`	`199`
`@@ -220,7 +220,7 @@ $easing-curves: (`
`220`	`220`	`}`
`221`	`221`
`222`	`222`	`// Generic animations`
`223`		`-@keyframes rotate-center {`
	`223`	`+@keyframes igc-rotate-center {`
`224`	`224`	`0% {`
`225`	`225`	`transform: rotate(0);`
`226`	`226`	`}`
`@@ -230,14 +230,14 @@ $easing-curves: (`
`230`	`230`	`}`
`231`	`231`	`}`
`232`	`232`
`233`		`-@keyframes initial-counter {`
	`233`	`+@keyframes igc-initial-counter {`
`234`	`234`	`from {`
`235`	`235`	`--_progress-integer: 0;`
`236`	`236`	`--_progress-fraction: 0;`
`237`	`237`	`}`
`238`	`238`	`}`
`239`	`239`
`240`		`-@keyframes initial-width {`
	`240`	`+@keyframes igc-initial-width {`
`241`	`241`	`from {`
`242`	`242`	`width: 0;`
`243`	`243`	`}`
`@@ -247,7 +247,7 @@ $easing-curves: (`
`247`	`247`	`}`
`248`	`248`	`}`
`249`	`249`
`250`		`-@keyframes initial-dashoffset {`
	`250`	`+@keyframes igc-initial-dashoffset {`
`251`	`251`	`from {`
`252`	`252`	`/* Start with no progress (0%) */`
`253`	`253`	`stroke-dashoffset: #{$circumference};`
Original file line number	Diff line number	Diff line change
`@@ -27,13 +27,13 @@ $theme: $fluent;`
`27`	`27`
`28`	`28`	`[part~='fill'] {`
`29`	`29`	`stroke-linecap: round;`
`30`		`- animation: 2s linear 0s infinite normal none running indeterminate-circular-fluent`
	`30`	`+ animation: 2s linear 0s infinite normal none running igc-indeterminate-circular-fluent`
`31`	`31`	`}`
`32`	`32`	`}`
`33`	`33`
`34`	`34`	`:host(:dir(rtl)),`
`35`	`35`	`:host([dir='rtl']) {`
`36`	`36`	`[part~='svg'][part~='indeterminate'] [part~='fill'] {`
`37`		`- animation-name: indeterminate-circular-fluent-rtl;`
	`37`	`+ animation-name: igc-indeterminate-circular-fluent-rtl;`
`38`	`38`	`}`
`39`	`39`	`}`
Original file line number	Diff line number	Diff line change
`@@ -17,7 +17,7 @@ $track-color: color(gray, 200);`
`17`	`17`	`}`
`18`	`18`
`19`	`19`	`[part~='indeterminate'] {`
`20`		`- animation-name: indeterminate-bar-fluent-rtl;`
	`20`	`+ animation-name: igc-indeterminate-bar-fluent-rtl;`
`21`	`21`	`}`
`22`	`22`	`}`
`23`	`23`
`@@ -40,7 +40,7 @@ $track-color: color(gray, 200);`
`40`	`40`	`[part~='indeterminate']:not([part~='secondary']) {`
`41`	`41`	`width: 33% !important;`
`42`	`42`	`min-width: 33%;`
`43`		`- animation-name: indeterminate-bar-fluent;`
	`43`	`+ animation-name: igc-indeterminate-bar-fluent;`
`44`	`44`	`animation-duration: var(--linear-animation-duration);`
`45`	`45`	`animation-timing-function: ease;`
`46`	`46`	`animation-iteration-count: infinite;`