0.5.4 • Published 9 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