非挂件实现进度条

@property --progress {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 0%;
}


.protyle-wysiwyg [data-node-id].list[data-subtype="t"] {
    content:var(--progress) ;
    border-radius: 25px;
    background: linear-gradient(90deg,rgb(123, 255, 0) , #0f0, #0ff var(--progress), transparent 0);
    border: 1px solid #eee;
    transition: .3s --progress;
}

if(msg&&msg.data&&msg.data){
    if(JSON.parse(msg.data).cmd=="transactions"){
        document.querySelectorAll(`.protyle-wysiwyg [data-node-id].list[data-subtype="t"] `).forEach(
            list => {
                let checked = list.querySelectorAll(`:scope > div.protyle-task--done`).length
                let total = list.querySelectorAll(`:scope > div[data-subtype="t"]`).length
                console.log(checked, total)
                list.setAttribute("style", `--progress : ${checked / total * 100}%`)
            }
        )

    }
}

}
)
啊 效果像这样

有老哥问进度条就随便写的，实际用的时候最好改一改哈，往主题里或者代码片段里面塞应该都可以

实现进度条的方式来自掘金这位大佬的帖子哒
N 种仅仅使用 HTML/CSS 实现各类进度条的方式 - 掘金 (juejin.cn)