如何为JavaScript动态控制的进度条添加箭头指示器

<div class="progress-container">
    <div class="progress__fill"></div>
</div>

.progress-container {
    width: 100%;
    height: 24px;
    background-color: darkgray;
    border-radius: 10px;
    overflow: hidden; /* 确保填充区域不会溢出容器 */
}

.progress__fill {
    float: left; /* 或者使用 display: flex; */
    background-color: red;
    width: 0%; /* 初始宽度，会被JS更新 */
    height: 100%;
    border-radius: 10px;
    position: relative; /* 为伪元素提供定位上下文 */
    transition: width 0.3s ease-in-out; /* 添加平滑过渡效果 */
}

.progress__fill::after {
    content: ''; /* 伪元素必须有 content 属性 */
    position: absolute;
    right: 0; /* 定位到填充区域的右边缘 */
    top: 50%; /* 垂直居中 */
    transform: translate(50%, -50%); /* 调整位置，使箭头尖端刚好在右边缘外 */

    /* 创建三角形 */
    width: 0;
    height: 0;
    border-top: 12px solid transparent; /* 箭头高度的一半 */
    border-bottom: 12px solid transparent; /* 箭头高度的一半 */
    border-left: 12px solid red; /* 箭头颜色和宽度 */
    /* 这里的颜色与 .progress__fill 的背景色一致，以形成无缝衔接 */
}

let VALUE = '50%'; // 示例值，实际应用中会是动态的

function updateProgressBar(progressBar, value) {
    progressBar.querySelector(".progress__fill").style.width = value;
}

const myProgressBar = document.querySelector(".progress-container");

// 示例调用：
updateProgressBar(myProgressBar, VALUE);

// 模拟动态更新
// setTimeout(() => updateProgressBar(myProgressBar, '75%'), 2000);
// setTimeout(() => updateProgressBar(myProgressBar, '25%'), 4000);

<div class="progress-container">
    <div class="progress__fill">
        <svg class="progress-arrow" viewBox="0 0 48 48" fill="#ff0000" xmlns="http://www.w3.org/2000/svg">
            <path d="M 0,48 V 0 l 48,24 z" />
        </svg>
    </div>
</div>

.progress-container {
    width: 100%;
    height: 24px;
    background-color: darkgray;
    border-radius: 10px;
    overflow: hidden; /* 确保填充区域不会溢出容器 */
}

.progress__fill {
    float: left;
    background-color: red;
    width: 0%; /* 初始宽度 */
    height: 100%;
    border-radius: 10px;
    position: relative; /* 为SVG提供定位上下文 */
    overflow: visible; /* 允许SVG超出填充区域，如果需要 */
    transition: width 0.3s ease-in-out;
}

.progress-arrow {
    position: absolute;
    right: -12px; /* 根据SVG实际宽度和希望的偏移量调整 */
    top: 50%;
    transform: translateY(-50%); /* 垂直居中 */
    width: 24px; /* SVG的显示宽度 */
    height: 24px; /* SVG的显示高度 */
    /* 这里的 fill 颜色应与 .progress__fill 的背景色一致 */
    fill: red; 
}

// JavaScript代码与方法一完全相同
let VALUE = '50%'; 

function updateProgressBar(progressBar, value) {
    progressBar.querySelector(".progress__fill").style.width = value;
}

const myProgressBar = document.querySelector(".progress-container");
updateProgressBar(myProgressBar, VALUE);

// 假设 VALUE 是一个表示进度的百分比字符串，例如 '50%'
let VALUE = '50%'; 

/**
 * 更新进度条的填充宽度
 * @param {HTMLElement} progressBar - 进度条容器元素 (.progress-container)
 * @param {string} value - 进度值，例如 '50%'
 */
function updateProgressBar(progressBar, value) {
    const fillElement = progressBar.querySelector(".progress__fill");
    if (fillElement) {
        fillElement.style.width = value;
    }
}

// 获取进度条容器
const myProgressBar = document.querySelector(".progress-container");

// 初始更新
updateProgressBar(myProgressBar, VALUE);

// 示例：每隔一段时间更新进度
let currentProgress = 0;
const interval = setInterval(() => {
    currentProgress += 10;
    if (currentProgress > 100) {
        currentProgress = 0; // 重置或停止
        // clearInterval(interval); // 如果需要停止
    }
    updateProgressBar(myProgressBar, `${currentProgress}%`);
}, 1000);