Progress Circle

Display circular progress indicators with the ProgressCircle component.

The ProgressCircle component provides a visually appealing way to represent progress in a circular format

Example

Here’s an example of the ProgressCircle in action, displaying simple progress.

Progress Example

<div class="flex flex-col items-center justify-center space-y-2">
  <ProgressCircle
    :value="88"
    :size="80"
    :stroke-width="8"
    :show-label="true"
  />
  <span class="text-center">Progress Example</span>
</div>

nuxt-charts add ProgressCircle

Learn how to use the Nuxt Charts CLI to get premium components.

Props

Prop	Type	Default	Description
`value`	`number`	`0`	The progress value (0-100)
`size`	`number`	`60`	The diameter of the circle in pixels
`stroke-width`	`number`	`4`	The thickness of the progress stroke
`show-label`	`boolean`	`false`	Whether to display the percentage label

Gantt Charts

A Gantt Chart or timeline that displays a list of events in chronological order.

Status Tracker

A component to visualize the status of a service over a period of time.