I'm facing an issue while trying to create a progress bar that dynamically adjusts based on the device's width.
In this particular scenario, whenever the device width changes, the progress bar's width remains static, causing it to break when switching to landscape mode.
It's worth mentioning that I have 2 progress bars stacked on top of each other.
UPDATE: A functional solution has been implemented, see below
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="div_block-1545-2104" class="ct-div-block progress-bar"></div>
<div id="div_block-1545-2104" class="ct-div-block progress-bar2"></div>
$carousel.on("scroll.flickity", function (event, progress) {
const $progressBar = $(".progress-bar");
const divWidth = $(".progress-bar2").width();
progress = Math.max(0, Math.min(1, progress));
$progressBar.width(progress * divWidth);
});