Skip to content

KProgress

Progress is used to show the progress of current operation.

Install

bash
pnpm add @ikun-ui/progress
bash
yarn add @ikun-ui/progress
bash
npm install @ikun-ui/progress

Basic usage

20%
20%
30%
40%
50%
60%

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.

20%
🏀
🐔

Color progress

color attribute decides the color of progress bar.

50%
50%
50%

Circle progress

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

20%
20%
20%
🏀
🏀
🏀

Dashboard progress

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

20%
20%
20%
🏀
🏀
🏀

Progress Props

NameTypeDefaultDescription
percentagenumber0Percentage
statusprimary / success / error / warning / infoprimaryThe current status of progress bar
typeline, circle, dashboardlineThe type of progress bar
strokeWidthnumber6The width of progress bar
widthnumber126The canvas width of circle progress
colorstring-The current color of progress bar
textInsidebooleanfalsePut description inside the progress bar (type is 'line')
format(v: number) => string-Custom text format
durationnumber0.28 (s)Control the animation duration of progress (type is 'line')
showTextbooleantrueWhether to show percentage
clsstringtrueAdditional class
attrsRecord<string, string>{}Additional attributes

Progress Slots

NameDescription
defaultCustomized content

MIT Licensed