圆环进度条，内环阴影，这种要怎么实现？

项目中有一个这种进度条，网上找了很多这种进度条的，基本写完了，但是总是实现不了内环周围那层模糊阴影。

后台转前端新手，基础不牢，真的太难，求助有没有好的方法或者其他思路。

我只能实现到下面这种：

tample

<view class="circle">
    <view class="circle-l"></view>
    <view class="circle-left" >
        <view class="left" :style="leftStyle"></view>
    </view>
    <view class="circle-right" >
        <view class="right" :style="rightStyle"></view>
    </view>
    <view class="circle-s"></view>
    <view class="circle_num">{{percent}}%</view>
</view>
<slider value="100" @changing="onchange" min="0" max="100" show-value />

script

    const percent = ref(0);
    const leftStyle = computed(()=>{
        if (percent.value >= 50) {
            let rotate = 180+percent.value * 3.6
            return 'transform: rotate('+rotate+'deg)'
        } else {
            return ''
        }
    });
    const rightStyle = computed(()=>{
        if (percent.value<=50) {
            return 'transform: rotate('+percent.value * 3.6+'deg)'
        } else {
            return 'display: none;'
        }
    });
    
    const onchange = (value)=>{
        percent.value = value.detail.value;
    }

css

.circle {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 450rpx;
    .circle-left{
        position: absolute;
        width: 400rpx;
        height: 400rpx;
        clip: rect(0rpx,200rpx,400rpx,0rpx);
        border-radius: 50%;
        background-size: cover;
        background-image: url('');
        .left {
            position: absolute;
            width: 400rpx;
            height: 400rpx;
            clip: rect(0rpx,200rpx,400rpx,0rpx);
            background-color: #1C1D23;
            border-radius: 50%;
            background-size: cover;
        }
    }
    .circle-right{
        position: absolute;
        width: 400rpx;
        height: 400rpx;
        clip: rect(0rpx,400rpx,400rpx,200rpx);
        border-radius: 50%;
        background-size: cover;
        background-image: url('');
        .right {
            position: absolute;
            width: 400rpx;
            height: 400rpx;
            clip: rect(0rpx,400rpx,400rpx,200rpx);
            background-color: #1C1D23;
            border-radius: 50%;
            background-size: cover;
        }
    }
    .circle-l {
        position: absolute;
        width: 450rpx;
        height: 450rpx;
        border-radius: 50%;
        box-shadow: 0rpx 0rpx 20rpx #4F4F5B;
        background: #1C1D23;
    }
    .circle-s {
        position: absolute;
        width: 280rpx;
        height: 280rpx;
        border-radius: 50%;
        box-shadow: -2rpx -2rpx 6rpx #fff;
        background: #23232B;
    }
    .circle_num {
        width: 100%;
        font-size: 2rem;
        color: #fff;
        z-index: 6;
    }
}