Hey there! I've recently developed a unique progress bar component in React that showcases a stunning gradient background. This effect is achieved by utilizing the CSS mask property. While everything runs smoothly on Firefox, I'm facing a slight hiccup when it comes to Chrome.
For some reason, the mask doesn't quite apply as expected on Chrome unless I trigger a rerender by tweaking the browser size or toggling the mask property off and back on again.
Oddly enough, this issue only seems to occur on CodeSandbox and not here on Stack Overflow:
function increaseWidthUntil100Percent(element, currentWidth = 0) {
if (currentWidth < 100) {
const newWidth = currentWidth + 5;
element.style.width = `${newWidth}%`;
setTimeout(() => {
increaseWidthUntil100Percent(element, newWidth);
}, 1000);
}
}
const myDiv = document.getElementById('bar');
increaseWidthUntil100Percent(myDiv);.progress-bar {
height: 0.5rem;
border-radius: 3rem;
background-color: #c0c6df;
padding: 0.25rem;
width: 100%;
position: relative;
}
.progress-bar > .progress-bar__bar::before {
content: "";
border-radius: 3rem;
background: linear-gradient(
90deg,
rgba(209, 107, 165, 1) 0%,
rgba(132, 166, 228, 1) 50%,
rgba(1, 22, 42, 1) 100%
);
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.progress-bar > .progress-bar__bar {
height: 100%;
border-radius: 3rem;
-webkit-mask: linear-gradient(#fff 0 0);
mask: linear-gradient(#fff 0 0);
transition: 0.3s ease;
}<div class="progress-bar">
<div id="bar" style="width: 0" class="progress-bar__bar"></div>
</div>Your assistance with this matter is greatly appreciated!