Fix progress-bar animation when overriding --bs-progress-height

[Steve-Tech]

Description

This PR stops the animation from jumping when overriding the height of progress-bar-animated progress bars using the --bs-progress-height variable (from another CSS file).

Motivation & Context

I needed a thicker progress bar for a project, but the animation jumped every second, giving it a broken look. Here's the CSS I was using, including a workaround:

#status-card .progress {
    --bs-progress-height: 2rem;
}

/* Fix jumpiness of progress bar when height is non-default */
@keyframes progress-bar-stripes {
    0% {
        background-position-x: var(--bs-progress-height);
    }
}

Type of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Refactoring (non-breaking change)
• Breaking change (fix or feature that would change existing functionality)

Checklist

• I have read the contributing guidelines
• My code follows the code style of the project (using npm run lint)
• My change introduces changes to the documentation
• I have updated the documentation accordingly
• I have added tests to cover my changes
• All new and existing tests passed

Live previews

Quick gif with 2rem high progress bars:

This can't be seen in the documentation, but here's the relevant page:

• https://deploy-preview-40745--twbs-bootstrap.netlify.app/docs/5.3/components/progress

Related issues

[louismaximepiton]

Hey, thanks for your contribution.

The solution you provide is quite elegant in here. It seems that it was forgotten when we implemented the CSS variables. I'm fine adding it on my side. The only drawback I could see is that the animation is faster the more you increase the progress size. However, I think it works well for small values and it's better than what we have now.