1.0.3 • Published 12 months ago
webbie-progress v1.0.3
webbie-progress 
A web component to create simple progress and loading indicators. It can also be used to create simple avatar frames.
Install
Install with npm: npm install webbie-progress
Usage
Add script to page with <script type="module" src="node_modules/webbie-progress/dist/webbie-progress.js"></script>
<webbie-progress></webbie-progress>Props
All props are optional, but you'd definitely need to use some to get anything more than a circle. The SVG viewbox is 100x100 and some props like radius and stroke-width are set relative to that.
| Name | Description |
|---|---|
| vertices | decides the shape (frame) of the svg element (value: 3-20, circle for all other values) |
| size | set the size of the square element |
| rotate | rotate the svg frame clockwise in degrees (value: 0-360) |
| percent | portion of the stroke path to be colored (value: 0-100) |
| text | content for a centered <text> element |
| text-style | custom css for the <text> element |
| image | src for an image that is clipped by the svg frame |
| radius | set the circumradius for the frame |
| stroke-width | set width for stroke |
| frame-width | set width for frame |
| stroke-color | set color for stroke |
| frame-color | set color for frame |
| fill-color | set background color within frame (won't work if image prop is used) |
| stroke-shadow | set drop shadow color for stroke |
| stroke-anim-speed | set animation speed for stroke movement along the frame (default: 0s) |
| frame-anim-speed | set animation speed for frame rotation (default: 0s) |
| stroke-anim-reverse | reverse animation direction |
| frame-anim-reverse | reverse animation direction |
| stroke-style | set additional css style for stroke path |
| frame-style | set css for frame path |
Further examples in demo.html