Progress

Basic Usage

Set :value to a number from 0 to 100. The fill uses the accent colour by default and animates as the value changes.

<c-ui.progress :value="60" />

{% cotton ui.progress :value="60" /%}

Colors

Use the color prop for a set of built-in fills.

<c-ui.progress :value="70" color="accent" />
<c-ui.progress :value="70" color="blue" />
<c-ui.progress :value="70" color="green" />
<c-ui.progress :value="70" color="amber" />
<c-ui.progress :value="70" color="red" />
<c-ui.progress :value="70" color="violet" />

{% cotton ui.progress :value="70" color="accent" /%}
{% cotton ui.progress :value="70" color="blue" /%}
{% cotton ui.progress :value="70" color="green" /%}
{% cotton ui.progress :value="70" color="amber" /%}
{% cotton ui.progress :value="70" color="red" /%}
{% cotton ui.progress :value="70" color="violet" /%}

Sizes

Five track heights, from size="xs" to size="xl". The default is md.

<c-ui.progress :value="60" size="xs" />
<c-ui.progress :value="60" size="sm" />
<c-ui.progress :value="60" size="md" />
<c-ui.progress :value="60" size="lg" />
<c-ui.progress :value="60" size="xl" />

{% cotton ui.progress :value="60" size="xs" /%}
{% cotton ui.progress :value="60" size="sm" /%}
{% cotton ui.progress :value="60" size="md" /%}
{% cotton ui.progress :value="60" size="lg" /%}
{% cotton ui.progress :value="60" size="xl" /%}

Custom Color

Need something outside the built-in set? Pass any utility classes to the fill with bar_class. It overrides color, so you can use a solid shade, a gradient, anything.

<c-ui.progress :value="80" bar_class="bg-fuchsia-600" />
<c-ui.progress :value="80" bar_class="bg-gradient-to-r from-sky-500 to-violet-500" />

{% cotton ui.progress :value="80" bar_class="bg-fuchsia-600" /%}
{% cotton ui.progress :value="80" bar_class="bg-gradient-to-r from-sky-500 to-violet-500" /%}

Showing the Value

Add show_value to render the percentage beside the bar.

42%

<c-ui.progress :value="42" show_value />

{% cotton ui.progress :value="42" show_value /%}

Or label the value with a Tooltip. Pin it open for a permanent callout, or drop open to show it on hover.

<c-ui.tooltip content="42% complete" arrow open>
    <div class="w-64">
        <c-ui.progress :value="42" />
    </div>
</c-ui.tooltip>

{% cotton ui.tooltip content="42% complete" arrow open %}
    <div class="w-64">
        {% cotton ui.progress :value="42" /%}
    </div>
{% endcotton %}

API Reference

Props

Name	Description	Type	Options	Default
`:value`	Completion percentage from 0 to 100.	int	—	0
`color`	Built-in fill colour.	str	`accentzincblueskygreenamberredviolet`	accent
`bar_class`	Utility classes applied to the fill. Overrides color, so you can use any custom shade or gradient.	str	—
`size`	Track height.	str	`xssmmdlgxl`	md
`:show_value`	Show the percentage beside the bar.	bool	`TrueFalse`	False
`class`	Utility classes applied to the outer wrapper.	str	—