@keyframes animate-stripes{0%{background-position:0 0,0 0}100%{background-position:0 0,-8rem 0}}.progress__track{border-color:#c2c2c2;border-radius:10em;background:#ebebeb linear-gradient(#e7e7df, #f0f0f0);box-shadow:inset 0 .1rem .3rem rgba(0,0,0,.16)}.progress__bar{block-size:1.6rem;margin-block-start:-0.1rem;margin-inline-end:-0.1rem;padding-block:0;padding-inline:.1rem;transition:width .5s ease-out;animation:animate-stripes 3s linear infinite;border-block:.1rem var(--color-main) solid;border-inline:.1rem var(--color-main) solid;border-radius:10em;background:hsl(from var(--color-main) h s calc(l - 5%)) linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15)),linear-gradient(to right bottom, hsl(from var(--color-main) h s calc(l - 5%)) 0%, hsl(from var(--color-main) h s calc(l - 5%)) 25%, hsl(from var(--color-main) h s calc(l - 5%)) 25%, hsl(from var(--color-main) h s calc(l - 5%)) 50%, hsl(from var(--color-main) h s calc(l - 5%)) 50%, hsl(from var(--color-main) h s calc(l - 5%)) 75%, hsl(from var(--color-main) h s calc(l - 5%)) 100%);background-size:4rem 4rem}@media screen and (prefers-reduced-motion: reduce){.progress__bar{transition:none;animation:none}}[dir=rtl] .progress__bar{animation-direction:reverse}