bug: ion-progress-bar transition cannot be overridden

Bug Report

Ionic version:

[ ] 4.x [x] 5.x

Current behavior: When having quick data value updates (< 150ms), the ion-progress-bar components “jumps” back since the transition of the progress element has not finished yet. Since no CSS vars are used for that and there is no chance to use slots for injecting a progress element, that you can apply custom CSS rules to, there is no possibility to change the transition-duration.

Please see this video (dropbox link) for a demonstration.

Expected behavior: Possibility to change transition-duration for ion-progress-bar via CSS vars.

Steps to reproduce:

1. Add an ion-progress-bar component to a template.
2. Bind the data attribute to a local property.
3. Create a loop (e.g. via setInterval) with a short update interval (< 150ms) to manipulate the bound property.
4. See the ion-progress-bar component tremble.

Repository with demo/reproduction code:

https://github.com/JZubero/ion-progress-bar-Issue-21820

Ionic info:

Ionic:

   Ionic CLI                     : 6.10.1 (/home/js/.nvm/versions/node/v10.15.0/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.3.0
   @angular-devkit/build-angular : 0.803.28
   @angular-devkit/schematics    : 8.3.28
   @angular/cli                  : 8.3.28
   @ionic/angular-toolkit        : 2.2.0

Capacitor:

   Capacitor CLI   : 2.2.0
   @capacitor/core : 2.2.0

Utility:

   cordova-res (update available: 0.15.1) : 0.14.0
   native-run                             : 1.0.0

System:

   NodeJS : v10.15.0 (/home/js/.nvm/versions/node/v10.15.0/bin/node)
   npm    : 6.14.6
   OS     : Linux 5.4

[brandyscarney]

Thank you for the issue! We have added CSS Shadow Parts to the Progress bar in #22938. It can be used like the following:

ion-progress-bar::part(progress) {
  transition: none;
}

This will be in the 5.6.0 release. 🙂

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.