進度條
呈現物件的讀取以及就緒狀態指示。
範例
明暗色系
遵循使用者設定
遵循使用者設定
亮色
暗色
縮放
標準
放大
標準
縮小
50%
<div class="ts-progress">
    <div class="bar" style="--value: 50;">
        <div class="text">50%</div>
    </div>
</div>
概要

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

這通常用來指示某項行為的進度,如果想要呈現剩餘額度或是計量則可以參考圓形量測計

內容
文字

進度列裡可以擺放一個文字作為百分比標籤。

80%
<div class="ts-progress">
    <div class="bar" style="--value: 80;">
        <div class="text">80%</div>
    </div>
</div>
狀態
啟用的

讓進度列表現出正在活動的效果。

<div class="ts-progress is-active">
    <div class="bar" style="--value: 70;"></div>
</div>
處理中

明確地讓使用者知道目前的進度正在被妥善處理中。

<div class="ts-progress is-processing">
    <div class="bar" style="--value: 40;"></div>
</div>
不定的

請求正在傳送且等待伺服器接收。

<div class="ts-progress is-indeterminate">
    <div class="bar" style="--value: 50;"></div>
</div>
佇列的

正在等待伺服器回傳結果。

<div class="ts-progress is-queried">
    <div class="bar" style="--value: 30;"></div>
</div>
外觀
次要列

次要的進度列可以作為緩衝值或是輔助使用。

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

以不同的大小尺寸呈現進度條。

50%
50%
50%
50%
<div class="ts-progress is-tiny">
    <div class="bar" style="--value: 50;">
        <div class="text">50%</div>
    </div>
</div>
<div class="ts-progress is-small">
    <div class="bar" style="--value: 50;">
        <div class="text">50%</div>
    </div>
</div>
<div class="ts-progress">
    <div class="bar" style="--value: 50;">
        <div class="text">50%</div>
    </div>
</div>
<div class="ts-progress is-large">
    <div class="bar" style="--value: 50;">
        <div class="text">50%</div>
    </div>
</div>
組合應用
相簿上傳佇列

上傳相簿照片時,通常會有一個上傳進度列和輔助文字。

70%
共 4 張照片,3 張正在處理中。
<div class="ts-box">
    <div class="ts-content is-secondary">
        <div class="ts-progress is-processing">
            <div class="bar" style="--value: 70;">
                <div class="text">70%</div>
            </div>
        </div>
        <div class="ts-space is-small"></div>
        <div class="ts-text is-description">共 4 張照片,3 張正在處理中。</div>
    </div>
    <div class="ts-divider"></div>
    <div class="ts-content">
        <div class="ts-row">
            <div class="column">
                <img src="image.png" style="width: 148px">
            </div>
            <div class="column is-fluid">
                <div class="ts-row">
                    <div class="column is-fluid">
                        <div class="ts-input is-fluid">
                            <input type="text" placeholder="照片標題">
                        </div>
                    </div>
                    <div class="column">
                        <button class="ts-button is-icon is-outlined">
                            <span class="ts-icon is-trash-icon"></span>
                        </button>
                    </div>
                </div>
                <div class="ts-space"></div>
                <div class="ts-input is-fluid">
                    <textarea placeholder="描述一下這張照片…"></textarea>
                </div>
            </div>
        </div>
    </div>
</div>
在尋找相似的元件嗎?
由來自 台灣的 Yami Odymel 所設計,當然還有貢獻者們的愛心❤️。原始碼授權方式為 MIT,文件則為 CC 0 公眾領域。還請盡情地使用、分享或一同改進。Tocas UI 是卡莉絲伊繁星的設計語言,而卡莉絲伊繁星屬對空音商事
台灣正體語系協作者:Yami Odymel、coin3x、Sea-n