diff --git a/core/api.txt b/core/api.txt
index 8c559cd3da2..3910ab4bef9 100644
--- a/core/api.txt
+++ b/core/api.txt
@@ -842,7 +842,9 @@ ion-progress-bar,prop,type,"determinate" | "indeterminate",'determinate',false,f
 ion-progress-bar,prop,value,number,0,false,false
 ion-progress-bar,css-prop,--background
 ion-progress-bar,css-prop,--buffer-background
+ion-progress-bar,css-prop,--buffer-transition
 ion-progress-bar,css-prop,--progress-background
+ion-progress-bar,css-prop,--progress-transition
 
 ion-radio,shadow
 ion-radio,prop,color,string | undefined,undefined,false,false
diff --git a/core/src/components/progress-bar/progress-bar.scss b/core/src/components/progress-bar/progress-bar.scss
index 2f70b8d6656..d33b152c762 100644
--- a/core/src/components/progress-bar/progress-bar.scss
+++ b/core/src/components/progress-bar/progress-bar.scss
@@ -1,4 +1,5 @@
 @import "../../themes/ionic.globals";
+@import "progress-bar.vars";
 
 // Progress bar
 // --------------------------------------------------
@@ -8,11 +9,15 @@
   /**
   * @prop --background:  Same as --buffer-background when using a determinate progress bar, otherwise it styles the background of the ion-progress-bar itself.
   * @prop --progress-background: Color of the progress bar
+  * @prop --progress-transition: Transition of the progress bar
   * @prop --buffer-background: Color of the buffer bar
+  * @prop --buffer-transition: Transition of the buffer bar
   */
   --background: #{ion-color(primary, base, 0.2)};
   --progress-background: #{ion-color(primary, base)};
+  --progress-transition: #{$progress-bar-transition};
   --buffer-background: var(--background);
+  --buffer-transition: #{$progress-bar-transition};
   display: block;
 
   position: relative;
@@ -57,8 +62,14 @@
 .progress-buffer-bar {
   /* stylelint-disable-next-line property-blacklist */
   transform-origin: left top;
+}
+
+.progress {
+  transition: var(--progress-transition);
+}
 
-  transition: transform 150ms linear;
+.progress-buffer-bar {
+  transition: var(--buffer-transition);
 }
 
 // Progress and background bar
diff --git a/core/src/components/progress-bar/progress-bar.vars.scss b/core/src/components/progress-bar/progress-bar.vars.scss
new file mode 100644
index 00000000000..84b567a5326
--- /dev/null
+++ b/core/src/components/progress-bar/progress-bar.vars.scss
@@ -0,0 +1,5 @@
+// Progress bar
+// --------------------------------------------------
+
+/// @prop - default transition of the progress-bar
+$progress-bar-transition:      transform 150ms linear !default;
diff --git a/core/src/components/progress-bar/readme.md b/core/src/components/progress-bar/readme.md
index 56f88012e39..4af1105dc32 100644
--- a/core/src/components/progress-bar/readme.md
+++ b/core/src/components/progress-bar/readme.md
@@ -150,7 +150,9 @@ export default defineComponent({
 | ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
 | `--background`          | Same as --buffer-background when using a determinate progress bar, otherwise it styles the background of the ion-progress-bar itself. |
 | `--buffer-background`   | Color of the buffer bar                                                                                                               |
+| `--buffer-transition`   | Transition of the buffer bar                                                                                                          |
 | `--progress-background` | Color of the progress bar                                                                                                             |
+| `--progress-transition` | Transition of the progress bar                                                                                                        |
 
 
 ----------------------------------------------