diff --git a/src/runtime/components/elements/Progress.vue b/src/runtime/components/elements/Progress.vue index 4dab1c6b..170a3966 100644 --- a/src/runtime/components/elements/Progress.vue +++ b/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%,