Progressbar Circle

A customizable, circular progress bar component that animates the progress value.

Example Usage

Render a circular progress bar with configurable properties.

Example

70%

<template>
  <SkProgressbarCircle :value="value" :max="max" />
  <SkButton @click="value = (Math.random() + 1) * 0.5 * 100">Shuffle Numbers</SkButton>
</template>

<script setup>
import { ref } from 'vue';
const value = ref(Number(70));
const max = ref(Number(100));
</script>

Component Reference

Properties

Name	Type	Default	Description
value	Number	0	The current progress value.
suffix	String	'%'	Suffix to be displayed after the value.
max	Number	100	Maximum value of the progress bar.

Methods

animateProgress()

Animates the progress from the current value to the target value.

Styles

• .progressbar-circle: The container for the circular progress bar.
• .progressbar-circle__chart: SVG element for the progress circle.
• .progressbar-circle__circle--bg: Style for the background circle.
• .progressbar-circle__circle: Style for the foreground progress circle.
• .progressbar-circle__value: Style for the progress value text.

Slots

None.