Is there a creative solution to dynamically increase the width of a border up to a certain point, using the thickness of the border as a progress bar indicator while reusing defined colors in stylesheets?
Currently, I have the element with the border nested within a div that creates the wider part of the border by utilizing its background color. The outer container's background is styled with a linear gradient to transition from the inner element's border color to the background color, like
background: linear-gradient(to right, red 10%, blue 10%)
While this method works, I am aiming to avoid hard-coding the colors into the background. My goal is to dynamically adjust the percentage where the colors change as a style attribute, while keeping the colors defined as part of a class. An ideal scenario would look something like:
opacity: linear-gradient(to right, 0 10%, opacity 1 10%)
This approach would decouple the code altering the progress bar length from the colors, ensuring easier consistency with the website's overall color scheme. Any alternative methods achieving the same result would be appreciated; changing the width could be an option if it does not affect the child element's dimensions.
Are there any elegant solutions for this challenge?