進度條 - Tocas UI

範例

明暗色系

遵循使用者設定

亮色

暗色

縮放

標準

放大

標準

縮小

50%

<div class="ts-progress">
    <div class="bar" style="--value: 50">
        <div class="text">50%</div>
    </div>
</div>

結構

文字

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

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>

外觀

空的

當進度為零時，可以指定其狀態為空並隱藏進度條的背景。

<div class="ts-progress is-empty">
    <div class="bar" style="--value: 0">
        <div class="text">0%</div>
    </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%

<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-text is-description has-top-spaced-small">
            共 4 張照片，3 張正在處理中。
        </div>
    </div>
    <div class="ts-divider"></div>
    <div class="ts-content">
        <div class="ts-grid">
            <div class="column">
                <img src="image.png" width="145">
            </div>
            <div class="column is-fluid">
                <div class="ts-grid">
                    <div class="column is-fluid">
                        <div class="ts-input">
                            <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-input has-top-spaced">
                    <textarea placeholder="描述一下這張照片…"></textarea>
                </div>
            </div>
        </div>
    </div>
</div>

樣式變數

	範例	說明	預設值	目標
--value	`50`	進度列的百分比值。	`0`	`.bar`

在尋找相似的元件嗎？