Progress

Progress circle, generally used to communicate data intuitively to users

Import

import { Progress } from  'mand-mobile-next'

Vue.createApp().component(Progress.name, Progress)

Code Examples

API

Progress Props

PropsDescriptionTypeDefaultNote
valueprogress valueNumber00-1
sizecircle sizeNumber70unit px
widthcircle stroke widthNumber100unit px
colorcircle stroke highlight colorString#2F86F6-
border-colorcircle stroke colorStringrgba(0, 0, 0, .1)-
fillcircle fill colorStringtransparent-
linecapshape of endStringroundround, butt, square, inherit
rotate-Number0-
transitionuse transition when value changesBooleanfalse-
durationtransition durationNumber1000unit ms

Progress Slots

default

slot inside circle, generally used to add text

defs

slot inside circle svg, generally used to add defs, use elements, etc