RoundProgress Component
RoundProgress;A div control with display: table flow. Show canvas-drawed round progress with optional @title placeholder in the center.
Attributes
| Attribute | Default | Description |
|---|---|---|
width |
200 | Size of the panel, same value is also used for the height |
percent |
50 | |
line-width |
15 | Size of the line |
line-cap |
round | LineCap |
line-color |
cyan | Foreground line color, which represents the percentage |
bg-line-color |
#efefef | Background line color |
Animation
Refer to Mask Component Attribute Animation
Sample:
RoundProgress percent-transition='200ms easeInSine';Examples
# install atma toolkit npm install atma -g# run examples static server npm run examples # navigate `http://localhost:5777/examples/index.html` Test
npm test©️ MIT