Components
Progress
Display the progression of a task beautifully.
Usage
<template>
<NXW-Progress v-model="0" />
</template>
Props
circular
boolean
|
object
Default
false
Example
<template>
<NXW-Progress
:circular="{
size: 'size-20',
cutout: { size: 'before:size-[84%]', text: 'before:text-[70%]' },
}"
/>
</template>
color
object
Default
<template>
<NXW-Progress
:color="{
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',
}"
/>
</template>
initial-load-time
number
|
boolean
Default
100
initial-load-time-type
string
Default
calc
loading
boolean
Default
false
rounded
string
|
boolean
Default
rounded-lg
size
object
Default
<template>
<NXW-Progress :size="{ width: 'w-full', height: 'h-1' }" />
</template>
transition
object
|
boolean
Default
<template>
<NXW-Progress
:transition="{ duration: 'duration-500', ease: 'ease-in-out' }"
/>
</template>