fix(Progress): handle carousel and carousel-inverse animations in…

… RTL mode (#2400)

Co-authored-by: malik jouda <[email protected]>

src/runtime/components/elements/Progress.vue

@@ -256,6 +256,20 @@ progress:indeterminate {
     }
   }
 
+  [dir=rtl] &.bar-animation-carousel {
+    &:after {
+      animation: carousel-rtl 2s ease-in-out infinite;
+    }
+
+    &::-webkit-progress-value {
+      animation: carousel-rtl 2s ease-in-out infinite;
+    }
+
+    &::-moz-progress-bar {
+      animation: carousel-rtl 2s ease-in-out infinite;
+    }
+  }
+
   &.bar-animation-carousel-inverse {
     &:after {
       animation: carousel-inverse 2s ease-in-out infinite;
@@ -270,6 +284,20 @@ progress:indeterminate {
     }
   }
 
+  [dir=rtl] &.bar-animation-carousel-inverse {
+    &:after {
+      animation: carousel-inverse-rtl 2s ease-in-out infinite;
+    }
+
+    &::-webkit-progress-value {
+      animation: carousel-inverse-rtl 2s ease-in-out infinite;
+    }
+
+    &::-moz-progress-bar {
+      animation: carousel-inverse-rtl 2s ease-in-out infinite;
+    }
+  }
+
   &.bar-animation-swing {
     &:after {
       animation: swing 3s ease-in-out infinite;
@@ -315,6 +343,22 @@ progress:indeterminate {
   }
 }
 
+@keyframes carousel-rtl {
+
+  0%,
+  100% {
+    width: 50%
+  }
+
+  0% {
+    transform: translateX(100%)
+  }
+
+  100% {
+    transform: translateX(-200%)
+  }
+}
+
 @keyframes carousel-inverse {
 
   0%,
@@ -331,6 +375,22 @@ progress:indeterminate {
   }
 }
 
+@keyframes carousel-inverse-rtl {
+
+  0%,
+  100% {
+    width: 50%
+  }
+
+  0% {
+    transform: translateX(-200%)
+  }
+
+  100% {
+    transform: translateX(100%)
+  }
+}
+
 @keyframes swing {
 
   0%,