fix(progress): completes animation for dir='rtl' (#7511)

**Related Issue:** #6569 

## Summary

Animates the `calcite-progress` over the complete length of the track
when `dir='rtl'`

packages/calcite-components/src/components/progress/progress.scss

@@ -31,6 +31,9 @@
 .indeterminate {
   @apply w-1/5;
   animation: looping-progress-bar-ani scaleDuration(--calcite-internal-animation-timing-medium, 11) linear infinite;
+  &.calcite--rtl {
+    animation-name: looping-progress-bar-ani-rtl;
+  }
 }
 
 .reversed {
@@ -54,4 +57,16 @@
   }
 }
 
+@keyframes looping-progress-bar-ani-rtl {
+  0% {
+    transform: translate3d(100%, 0, 0);
+  }
+  50% {
+    inline-size: 40%;
+  }
+  100% {
+    transform: translate3d(-600%, 0, 0);
+  }
+}
+
 @include base-component();

packages/calcite-components/src/components/progress/progress.tsx

@@ -1,4 +1,6 @@
 import { Component, Element, h, Prop, VNode } from "@stencil/core";
+import { getElementDir } from "../../utils/dom";
+import { CSS_UTILITY } from "../../utils/resources";
 @Component({
   tag: "calcite-progress",
   styleUrl: "progress.scss",
@@ -30,6 +32,7 @@ export class Progress {
   render(): VNode {
     const isDeterminate = this.type === "determinate";
     const barStyles = isDeterminate ? { width: `${this.value * 100}%` } : {};
+    const dir = getElementDir(this.el);
     return (
       <div
         aria-label={this.label || this.text}
@@ -43,6 +46,7 @@ export class Progress {
             class={{
               bar: true,
               indeterminate: this.type === "indeterminate",
+              [CSS_UTILITY.rtl]: dir === "rtl",
               reversed: this.reversed,
             }}
             style={barStyles}