Skip to content

KProgress

示例

Progress value: 60%

Indeterminate

Progress bar with determinate and indeterminate variants.

Props

NameTypeDefaultDescription
valuenumber0Current progress value.
maxnumber100Maximum progress value.
variant'default' | 'indeterminate''default''default' fills based on value/max; 'indeterminate' shows a looping animation.
classstringAdditional CSS classes.
theme'auto' | 'day' | 'night''auto'Theme mode. auto follows the current theme; day and night force a specific mode.

Basic Usage

vue
<script setup>
import { ref } from 'vue'
import { KProgress } from '@kK-2004/ui-component'

const progress = ref(60)
</script>

<template>
  <KProgress :value="progress" :max="100" />
  <KProgress variant="indeterminate" />
</template>