Progressbars - fix issues after the refactoring (#15270)

Author: desig9stein

projects/igniteui-angular/src/lib/core/styles/components/progress/circular/_circular-theme.scss

@@ -81,12 +81,7 @@
     $diameter: calc(var(--circular-size) + var(--stroke-thickness));
     $radius: calc(var(--circular-size) / 2 - var(--stroke-thickness) * .5);
     $circumference: calc(#{$radius} * 2 * 3.1416);
-
     $variant: map.get($theme, '_meta', 'variant');
-    $stroke-width: rem(4px);
-
-    $font-size: round(calc(#{var-get($theme, 'diameter')} / var(--scale-factor) - var(--stroke-thickness)), 1px);
-    $font-size-fraction: round(calc(#{var-get($theme, 'diameter')} / var(--scale-factor) - var(--stroke-thickness) - rem(2px)), 1px);
 
     %display-circular {
         --circular-size: calc(#{var-get($theme, 'diameter')} - var(--stroke-thickness));
@@ -128,7 +123,7 @@
 
             %outer {
                 @if $variant != 'bootstrap' {
-                    animation: initial-dashoffset var(--_transition-duration) linear;
+                    animation: igx-initial-dashoffset var(--_transition-duration) linear;
                 } @else {
                     stroke-width: var(--stroke-thickness);
                 }
@@ -142,7 +137,7 @@
     %display-circular:not(%display-circular--indeterminate) {
         svg {
             %outer {
-                animation: initial-dashoffset var(--_transition-duration) linear;
+                animation: igx-initial-dashoffset var(--_transition-duration) linear;
                 stroke-dasharray: #{$circumference} #{$circumference};
                 stroke-dashoffset: calc(#{$circumference} - var(--_progress-percentage) * #{$circumference});
             }
@@ -152,15 +147,17 @@
     %display-circular:dir(rtl):not(%display-circular--indeterminate) {
         svg {
             %outer {
-                animation: initial-dashoffset-rtl var(--_transition-duration) linear;
+                animation: igx-initial-dashoffset-rtl var(--_transition-duration) linear;
                 animation-direction: reverse;
             }
         }
     }
 
     %display-circular--indeterminate {
         svg {
-            animation: 3s linear 0s infinite $animation-direction none running rotate-center;
+            @if $variant != 'fluent' {
+                animation: 3s linear 0s infinite $animation-direction none running rotate-center;
+            }
 
             @if $variant != 'bootstrap' {
                 transform-origin: 50% 50%;
@@ -179,9 +176,9 @@
 
                 @if $variant == 'fluent' {
                     stroke-linecap: round;
-                    animation: 2s linear 0s infinite normal none running indeterminate-circular-fluent
+                    animation: 2s linear 0s infinite normal none running igx-indeterminate-circular-fluent
                 } @else {
-                    animation: indeterminate-accordion 1.5s cubic-bezier(0, 0.085, 0.68, 0.53) $animation-direction infinite;
+                    animation: igx-indeterminate-accordion 1.5s cubic-bezier(0, 0.085, 0.68, 0.53) $animation-direction infinite;
                 }
 
                 @if $variant == 'bootstrap' {
@@ -198,7 +195,7 @@
 
             %outer {
                 @if $variant == 'fluent' {
-                    animation-name: indeterminate-circular-fluent-rtl;
+                    animation-name: igx-indeterminate-circular-fluent-rtl;
                 }
 
                 @if $variant == 'bootstrap' {
@@ -233,12 +230,17 @@
         stroke-dasharray: #{$circumference} #{$circumference};
         stroke-dashoffset: calc(#{$circumference} - var(--_progress-whole, 0) * #{$circumference});
         transition: stroke-dashoffset var(--_transition-duration) linear;
-        stroke-width: calc(var(--stroke-thickness) + rem(0.75px));
+
+        @if $variant == 'material' {
+            stroke-width: calc(var(--stroke-thickness) + rem(0.75px));
+        } @else {
+            stroke-width: var(--stroke-thickness);
+        }
     }
 
     %outer--indeterminate {
         stroke-dasharray: 289;
-        @include animation(indeterminate-accordion 1.5s cubic-bezier(0, .085, .68, .53) normal infinite);
+        @include animation(igx-indeterminate-accordion var(--_transition-duration) cubic-bezier(0, .085, .68, .53) normal infinite);
     }
 
     %inner,
@@ -255,7 +257,7 @@
     %text {
         position: absolute;
         color: var-get($theme, 'text-color');
-
+        font-size: round(calc(#{var-get($theme, 'diameter')} / var(--scale-factor) - var(--stroke-thickness)), 1px);
         line-height: normal;
         text-align: center;
         font-weight: 600;
@@ -264,6 +266,7 @@
             font-weight: 700;
         }
 
+        animation: igx-initial-counter var(--_transition-duration) ease-in-out;
         counter-reset:
             progress-integer var(--_progress-integer, 0)
             progress-fraction var(--_progress-fraction, 0);
@@ -273,16 +276,12 @@
     }
 
     %text:not(%text--fraction) {
-        font-size: #{$font-size};
-
         &::before {
             content: counter(progress-integer) '%';
         }
     }
 
     %text--fraction {
-        font-size: #{$font-size-fraction};
-
         &::before {
             content: counter(progress-integer) '.' counter(progress-fraction, decimal-leading-zero) '%';
         }
@@ -300,7 +299,7 @@
         stop-color: var-get($theme, 'progress-circle-color-end');
     }
 
-    @keyframes indeterminate-accordion {
+    @keyframes igx-indeterminate-accordion {
         0% {
             stroke-dashoffset: calc(#{$circumference} * 2);
             stroke-dasharray: calc(#{$circumference} * 9 / 10);
@@ -311,7 +310,7 @@
         }
     }
 
-    @keyframes indeterminate-accordion-rtl {
+    @keyframes igx-indeterminate-accordion-rtl {
         0% {
             stroke-dashoffset: calc(#{$circumference} * -2);
             stroke-dasharray: calc(#{$circumference} * 9 / 10);
@@ -324,7 +323,7 @@
 
     // Fluent: Circular progress animation for indeterminate state.
     // Dynamically changes stroke-dasharray and rotates for a smooth spinning effect.
-    @keyframes indeterminate-circular-fluent {
+    @keyframes igx-indeterminate-circular-fluent {
         0% {
             // Start the stroke at the correct position by adjusting the dasharray and dashoffset
             stroke-dasharray: calc(#{$circumference} * 0.0001), #{$circumference};
@@ -355,7 +354,7 @@
         }
     }
 
-    @keyframes indeterminate-circular-fluent-rtl {
+    @keyframes igx-indeterminate-circular-fluent-rtl {
         0% {
             stroke-dasharray: calc(#{$circumference} * 0.0001), #{$circumference};
 
@@ -381,8 +380,26 @@
         }
     }
 
+    @keyframes igx-initial-dashoffset {
+        from {
+            /* Start with no progress (0%) */
+            stroke-dashoffset: #{$circumference};
+        }
+
+        to {
+            stroke-dashoffset: calc(#{$circumference} - var(--_progress-percentage) * #{$circumference});
+        }
+    }
+
     // Generic animations
-    @keyframes rotate-center {
+    @keyframes igc-initial-counter {
+        from {
+            --_progress-integer: 0;
+            --_progress-fraction: 0;
+        }
+    }
+
+    @keyframes igx-rotate-center {
         0% {
             transform: rotate(0);
         }
@@ -392,9 +409,9 @@
         }
     }
 
-    %animation-none {
-        animation-name: none;
-        animation-duration: 0s;
+    // Reset the transition if the animate prop is set to false.
+    %animation-none:not(%display-circular--indeterminate) {
+        --_transition-duration: 0s !important;
     }
 
     %hide-counter {

projects/igniteui-angular/src/lib/core/styles/components/progress/linear/_linear-component.scss

@@ -63,6 +63,10 @@
             @include e(indicator-secondary) {
                 @extend %indicator__indeterminate-secondary !optional;
             }
+
+            @include e(value) {
+                @extend %value--hidden !optional;
+            }
         }
 
         @include m(animation-none) {
@@ -71,9 +75,7 @@
 
         @include m(hide-counter) {
             @include e(value) {
-                &::before {
-                    @extend %value--hidden !optional;
-                }
+                @extend %hide-counter !optional;
             }
         }
     }