圓形量測計
以圓形的方式呈現進度與使用程度。
範例
明暗色系
遵循使用者設定
遵循使用者設定
亮色
暗色
縮放
標準
放大
標準
縮小
40%
<div class="ts-gauge">
    <div class="bar" style="--value: 40;">
        <div class="text">40%</div>
    </div>
</div>
概要

這個元件需要自行透過 CSS 變數 --value 來控制進度列的百分比進度。

這通常用以指示某個數值,如果需要呈現某個行為正在載入、或是下載百分比,請使用進度條

外觀
圓形的

以全圓形無缺口的方式呈現整個量測計。

70%
<div class="ts-gauge is-circular">
    <div class="bar" style="--value: 70;">
        <div class="text">70%</div>
    </div>
</div>
上升的

呈現出類似上升數值的計數器,如:劑量、溫度、濕度。

50%
<div class="ts-gauge is-uplifted">
    <div class="bar" style="--value: 50;">
        <div class="text">50%</div>
    </div>
</div>
置中的

使其置中顯示。

40%
<div class="ts-gauge is-centered">
    <div class="bar" style="--value: 40;">
        <div class="text">40%</div>
    </div>
</div>
尺寸

更改圓形量測計的大小。

30%
30%
30%
<div class="ts-gauge is-small">
    <div class="bar" style="--value: 30;">
        <div class="text">30%</div>
    </div>
</div>
<div class="ts-gauge">
    <div class="bar" style="--value: 30;">
        <div class="text">30%</div>
    </div>
</div>
<div class="ts-gauge is-large">
    <div class="bar" style="--value: 30;">
        <div class="text">30%</div>
    </div>
</div>
組合應用
傳輸計量

雲端檔案傳輸空間通常會有一個顯示目前剩餘額度與流量的相關計數器。

38%
空間
19.12 GB / 50 GB
---
傳輸
0 B 已使用
<div class="ts-grid is-evenly-divided">
    <div class="column">
        <div class="ts-wrap is-middle-aligned">
            <div class="ts-gauge is-small is-circular">
                <div class="bar" style="--value: 38;">
                    <div class="text">38%</div>
                </div>
            </div>
            <div>
                <div class="ts-text is-bold">空間</div>
                19.12 GB / 50 GB
            </div>
        </div>
    </div>
    <div class="column">
        <div class="ts-wrap is-middle-aligned">
            <div class="ts-gauge is-small is-circular">
                <div class="bar" style="--value: 100;">
                    <div class="text">---</div>
                </div>
            </div>
            <div>
                <div class="ts-text is-bold">傳輸</div>
                0 B 已使用
            </div>
        </div>
    </div>
</div>
智慧家庭

用以指示目前溫度、濕度的測量計。

32 °C
2 °C
房間溫度
<div class="ts-wrap is-middle-aligned">
    <div class="ts-gauge is-uplifted">
        <div class="bar" style="--value: 80;">
            <div class="text">
                <span class="ts-icon is-big is-temperature-full-icon"></span>
            </div>
        </div>
    </div>
    <div>
        <div class="ts-statistic">
            <div class="value">32 °C</div>
            <div class="comparison is-increased">2 °C</div>
        </div>
        房間溫度
    </div>
</div>
在尋找相似的元件嗎?
由來自 台灣的 Yami Odymel 所設計,當然還有貢獻者們的愛心❤️。原始碼授權方式為 MIT,文件則為 CC 0 公眾領域。還請盡情地使用、分享或一同改進。Tocas UI 是卡莉絲伊繁星的設計語言,而卡莉絲伊繁星屬對空音商事
台灣正體語系協作者:Yami Odymel、coin3x、Sea-n