Web Components 是一種方便網站開發者簡單套用一些較複雜 UI 元件的套件，這邊介紹這個大家可能很常看到，但一時卻也不知道該怎麼製作的圓形進度條- Circle Progress。

要使用的話就是先把 module 讀入：

<script type="module" src="wc-msc-circle-progress.js"></script>

接著使用該 web component：

<msc-circle-progress>
<script type="application/json">
    {
        "size": 16,
        "value": 33,
        "max": 100,
        "round": true
    }
</script>
</msc-circle-progress>

 

如果要修改樣式，只要修改以下的 css 即可：

msc-circle-progress {
            --msc-circle-progress-font-size: 30px;
            --msc-circle-progress-font-color: #232a31;
            --msc-circle-progress-color: #b230c3;
            --msc-circle-progress-placeholder-color: #ddd;
}

 

此 Circle Progress 會跟著頁面的容器大小調整，所以只要放到一個區塊內，就會自動適應大小了。