Ring

Circular progress gauge with a tick scale and a centered value. The size prop (xs, sm, md, lg, xl) sets the diameter (a number in px still works).

Jump to API reference

Import

Vue

import { UiRing } from '@ziyarago/ui/vue'

Default

72%Seats sold

Vue

<UiRing :value="72" label="Seats sold" />

Small, no ticks

45%Visas

88%Paid

Vue

<UiRing :value="45" :size="120" :ticks="false" label="Visas" />

<UiRing
  :value="88"
  :size="120"
  :ticks="false"
  color="var(--zg-green)"
  label="Paid"
 />

Sizes

72%Seats sold

Vue

<UiRing :value="72" label="Seats sold" size="xs" />

<UiRing :value="72" label="Seats sold" size="sm" />

<UiRing :value="72" label="Seats sold" size="md" />

<UiRing :value="72" label="Seats sold" size="lg" />

<UiRing :value="72" label="Seats sold" size="xl" />

API reference

Circular progress gauge with a percentage in the center and a tick scale around it.

Props

PropType and valuesDefaultDescription

valuerequirednumber0Progress from 0 to 100; values are clamped.

labelstring—Caption under the percentage.

colorstring'var(--zg-brand)'Any CSS color for the arc and ticks.

thicknessnumber—Stroke width in px. Defaults to about 8% of the diameter, minimum 8.

ticksbooleantrueShows the outer 60-tick scale; false removes it and enlarges the arc.

valueSizenumber—Percentage font size in px. Defaults to 22% of the diameter.

sizexssmmdlgxl'md'Diameter: xs 72, sm 120, md 180, lg 240, xl 300 px; a number is used as px.