0.5.4 • Published 10 years ago
compo-round-progress v0.5.4
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:copyright: MIT