Progress - Tocas UI

Example

Theme

Auto

Light

Dark

Scale

Medium

Large

Medium

Small

50%

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

Structure

Text

A progress bar can have a text to show the percentage.

80%

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

States

Active

A progress bar can show activity.

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

Processing

A progress bar can indicate that the task is being processed.

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

Indeterminate

A progress bar can be shown in indeterminate state.

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

Queried

A progress bar can show the task is being queried.

<div class="ts-progress is-queried">
    <div class="bar" style="--value: 30"></div>
</div>

Variations

Empty

An empty progress bar shows no progress.

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

Secondary

A secondary progress bar can act like a buffer or a secondary task.

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>

Sizes

A progress bar can have different sizes.

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>

Compositions

Upload Queue

Upload photos with a progress bar.

70%

3 of 4 photos are processing.

<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">
            3 of 4 photos are processing.
        </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="Title">
                        </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="Description..."></textarea>
                </div>
            </div>
        </div>
    </div>
</div>

CSS Variables

	Example	Description	Default Value	Target
--value	`50`	The percentage of the progress.	`0`	`.bar`

Looking for similar components?