KProgress

Progress is used to show the progress of current operation.

Install

pnpm

pnpm add @ikun-ui/progress

yarn

yarn add @ikun-ui/progress

npm

npm install @ikun-ui/progress

Basic usage

TextInside progress

In this case the percentage takes no additional space.

strokeWidth attribute decides the width of progress bar.

textInside attribute to put description inside the progress bar.

Color progress

color attribute decides the color of progress bar.

Circle progress

By setting type="circle", you can get a circle style of progress easily.

Dashboard progress

By setting type="dashboard", you can get a dashboard style of progress easily.

Progress Props

Name	Type	Default	Description
percentage	number	0	Percentage
status	primary / success / error / warning / info	primary	The current status of progress bar
type	line, circle, dashboard	line	The type of progress bar
strokeWidth	number	6	The width of progress bar
width	number	126	The canvas width of circle progress
color	string	-	The current color of progress bar
textInside	boolean	false	Put description inside the progress bar (type is 'line')
format	(v: number) => string	-	Custom text format
duration	number	0.28 (s)	Control the animation duration of progress (type is 'line')
showText	boolean	true	Whether to show percentage
cls	string	true	Additional class
attrs	Record<string, string>	{}	Additional attributes

Progress Slots

Name	Description
default	Customized content