Gauge - Tocas UI

Example

Theme

Auto

Light

Dark

Scale

Medium

Large

Medium

Small

40%

<div class="ts-gauge">
    <div class="bar" style="--value: 40">
        <div class="text">40%</div>
    </div>
</div>

Variations

Circular

A gauge can be circular.

70%

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

Uplifted

A gauge can look like a fuel gauge that goes up.

50%

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

Centered

A gauge can be centered.

40%

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

Sizes

A gauge can have different sizes.

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>

Compositions

Storage Spaces

Present the usage of storage space.

38%

Storage

19.12 GB / 50 GB

---

Bandwidth

0 B Used

<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">Storage</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">Bandwidth</div>
                0 B Used
            </div>
        </div>
    </div>
</div>

Temperature

Showing the temperature of a room.

32 °C

2 °C

Room Temperature

<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>
        Room Temperature
    </div>
</div>

CSS Variables

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

Looking for similar components?