Components
Progress
Display the progression of a task beautifully.
Usage
<template>
<NXW-Progress v-model="modelValue" />
</template>
<script setup lang="ts">
const modelValue = ref(33)
</script>
Props
circular
boolean
|
object
Default
{
"size": "size-20",
"cutout": {
"size": "before:size-[84%]",
"text": "text-[70%]"
}
}
color
object
Default
{
"circle": "#e5e7eb",
"circleDark": "#27272a",
"circleProgress": "#00C16A",
"circleProgressDark": "#00C16A",
"circleCutout": "before:bg-white dark:before:bg-zinc-900",
"background": "bg-gray-200 dark:bg-zinc-800",
"firstStrike": "before:bg-primary-500",
"secondStrike": "after:bg-primary-600",
"linearProgress": "bg-primary-500",
"linearProgressHover": "hover:bg-secondary-500"
}
initial-load-time
number
|
boolean
Default
100
initial-load-time-type
calc
|
static
Default
calc
Possible Values
calcstaticloading
boolean
Default
false
rounded
boolean
|
string
Default
rounded-lg
size
object
Default
{
"width": "w-full",
"height": "h-1"
}
transition
boolean
|
object
Default
{
"duration": "duration-500",
"ease": "ease-in-out"
}