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

• /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