diff --git a/src/material-experimental/mdc-progress-bar/progress-bar.scss b/src/material-experimental/mdc-progress-bar/progress-bar.scss
index 9a2a94e4768f..8c631d246f87 100644
--- a/src/material-experimental/mdc-progress-bar/progress-bar.scss
+++ b/src/material-experimental/mdc-progress-bar/progress-bar.scss
@@ -7,6 +7,11 @@
   // Explicitly set to `block` since the browser defaults custom elements to `inline`.
   display: block;
 
+  // Inverts the progress bar horizontally in `query` mode.
+  &[mode='query'] {
+    transform: scaleX(-1);
+  }
+
   &._mat-animation-noopable {
     .mdc-linear-progress__buffer-dots,
     .mdc-linear-progress__primary-bar,
diff --git a/src/material-experimental/mdc-progress-bar/progress-bar.ts b/src/material-experimental/mdc-progress-bar/progress-bar.ts
index 72db6ecf3a34..d48327b1f7ca 100644
--- a/src/material-experimental/mdc-progress-bar/progress-bar.ts
+++ b/src/material-experimental/mdc-progress-bar/progress-bar.ts
@@ -69,12 +69,15 @@ export class MatProgressBar extends _MatProgressBarMixinBase implements AfterVie
 
   constructor(public _elementRef: ElementRef<HTMLElement>,
               private _ngZone: NgZone,
-              @Optional() private _dir?: Directionality,
+              @Optional() dir?: Directionality,
               @Optional() @Inject(ANIMATION_MODULE_TYPE) public _animationMode?: string) {
     super(_elementRef);
     this._isNoopAnimation = _animationMode === 'NoopAnimations';
-    if (_dir) {
-      this._dirChangeSubscription = _dir.change.subscribe(() => this._syncFoundation());
+    if (dir) {
+      this._dirChangeSubscription = dir.change.subscribe(() => {
+        this._syncFoundation();
+        this._foundation?.restartAnimation();
+      });
     }
   }
 
@@ -218,17 +221,7 @@ export class MatProgressBar extends _MatProgressBarMixinBase implements AfterVie
     const foundation = this._foundation;
 
     if (foundation) {
-      const direction = this._dir ? this._dir.value : 'ltr';
       const mode = this.mode;
-
-      const reverse = direction === 'rtl' ? mode !== 'query' : mode === 'query';
-      const progressDirection = reverse ? 'rtl' : 'ltr';
-      const currentDirection = this._elementRef.nativeElement.getAttribute('dir');
-      if (currentDirection !== progressDirection) {
-        this._elementRef.nativeElement.setAttribute('dir', progressDirection);
-        foundation.restartAnimation();
-      }
-
       foundation.setDeterminate(mode !== 'indeterminate' && mode !== 'query');
 
       // Divide by 100 because MDC deals with values between 0 and 1.