SOURCE

const popover = document.getElementById("mypopover")
const colorDom = document.querySelector('.color')
const rangeDom = document.querySelector('#range')
rangeDom.addEventListener('change',(e)=>{
    let range = e.target.value;
    popover.showPopover()
    popover.innerText=`进度：${range}%`

    const pre= Number((range-0.3).toFixed(2))
    const current= Number(range)
    const colorChangeFrames = {
        '--pre':pre+'%',
        '--current':current+'%'
    };
    // 此方案1 有过渡动画
    colorDom.animate({
        // 这两个变量必须是自定义的css属性，如果只是定义的css变量则不会有过渡效果
        '--pre':pre+'%',
        '--current':current+'%'
    }, {
        duration: 300,
        iterations: 1,
        fill: 'forwards'
    });
    // 此方案2 无过渡动画，浏览器不支持css变量时用此 优雅降级；
    // let backgroundGradient = `conic-gradient(
    //     #fff 1deg, #f00 2deg,
    //     #ff0, #0f0, 
    //     #0ff, #00f, #f0f ,
    //     #f0f ${pre}%,
    //     #666 ${current}%
    //     )`;
    // colorDom.style.background = backgroundGradient
    // 此方案3 无过渡效果，直接抛弃此方案，使用方案1的动画api，
    // colorDom.style.setProperty('--pre', pre+'%');
    // colorDom.style.setProperty('--current', current+'%');
    
})

<div class="father">
    <h4>放图片放视频，都不会被设置了mask的区域遮挡</h4>
    <h4>放图片放视频，都不会被设置了mask的区域遮挡</h4>
    <h4>放图片放视频，都不会被设置了mask的区域遮挡</h4>
    <div class="item color ">
        <!-- 这里的文字不会在受遮罩影响的区域显示，
        透明遮罩区域会展示透传的内容 -->
        <h6>可以放弹幕，可以放弹幕，</h6>
        <h6>去掉background，制作弹幕层</h6>
        <h6>mask-image使用人物剪影透明图片同步变化</h6>
        <h6>实现弹幕不遮挡主要内容</h6>
       
    </div>
    <br>
    <br>
    <input type="range" id="range" name="volume" min="0" max="100" />
    <div popover id="mypopover"></div>
</div>
<script>
   
    
</script>

.father {
        position:relative;
        width: 220px;
        height: 220px;
        background: yellow;
    }
    /* 如果不支持自定义属性，则使用js方案2 没有动画过渡*/
    @property --pre{
            syntax: '<percentage>';
        inherits: false;
        initial-value: 99.99%;
    }
    @property --current{
        syntax: '<percentage>';
        inherits: false;
        initial-value: 100%;
    }
  
    .color{
       
        position:absolute;
        left:20px;
        top:20px;
        width: 180px;
        height: 180px;
        border-radius: 50%;
        background: conic-gradient(
            /*  from 表示颜色以及角度开始的地方 默认是顶部为0deg，
                设置了180deg之后就是以原来的180deg作为现在的0deg 
            */
            from 180deg,
            #fff -1deg, #f00 1deg,
            #ff0, #0f0, 
            #0ff, #00f, 
            #f0f var(--pre),
            #000 var(--current)
        );
        /* 跟自定义css属性一样 如果觉得有兼容要求 可以使用其他方式实现圆环空心圆*/
        mask-image: radial-gradient(
            rgba(36, 36, 3,0) 50px,#f10 51px 
        );
    }
    .innerbox{
        width:100%;
        height:100%;
    }
    .rotate180{
        transform:rotate(180deg);
    }
    #mypopover{
        padding:16px;
        background:rgba(2,3,4,.3);
        border:none;
        border-radius:4px;
    }
    h4{
        color:green;
    }
    h6{
        color:white;
    }