Simple progress ring customElement dev with Lit!
npm install @cicciosgamino/progress-ring!GitHub issues


Simple customizable progress ring 🪐!
``css`
progress-ring {
--progress-from-bottom: 10%;
--progress-from-left: 50%;
--bk-color: #34495e;
--progress-stroke-color: #3598dc;
--progress-opacity: 1;
--progress-font-family: 'Roboto', sans-serif;
--progress-font-size: 3rem;
--progress-font-color: whitesmoke;
}
`html`
`css`
progress-ring {
--progress-from-bottom: 10%;
--progress-from-left: 50%;
--bk-color: transparent;
--footprint-stroke-color: grey;
--footprint-opacity: .1;
--progress-stroke-color: #e9008d;
--progress-stroke-gradient-color: #dc0030ff;
--progress-stroke-linecap: round;
--progress-font-family: 'Jua', sans-serif;
--progress-font-size: 3rem;
--progress-font-color: #dc0030ff;
--progress-font-weight: 600;
}
`html`
`css
progress-ring {
--progress-from-bottom: 5%;
--progress-from-left: 50%;
--bk-color: transparent;
--progress-stroke-color: purple;
--progress-stroke-gradient-color: #00bc9b;
--progress-stroke-linecap: round;
--progress-opacity: .9;
--footprint-stroke-color: grey;
--footprint-opacity: .2;
--progress-font-family: 'Mitr', sans-serif;
--progress-font-size: 3rem;
--progress-font-weight: 700;
--progress-font-color: #232323;
}
`
`html`
`css
progress-ring {
--progress-from-bottom: 10%;
--progress-from-left: 50%;
--title-from-top: 10%;
--title-from-left: 50%;
--bk-color: transparent;
--progress-stroke-color: OrangeRed ;
--progress-stroke-gradient-color: salmon;
--progress-stroke-linecap: round;
--progress-opacity: .9;
--footprint-stroke-color: grey;
--footprint-opacity: .2;
--progress-font-family: 'Roboto', sans-serif;
--progress-font-size: 2rem;
--progress-font-weight: 700;
--progress-font-color: salmon;
--title-font-size: 4rem;
}
`
`html`
1. Install package
`bash`
npm install --save @cicciosgamino/progress-ring
2. Import
`html`
3. Place in your HTML
`html`
| Name | Type | Default | Description
| ------------- | ------------- | ------------ | --------------
| title | String | '' | Brief string to place inside the progress ring component space
| radius | Number | 60 | Radius of the ring
| progress | Number | 0 | Percent number passed to the component
| stroke | Number | 10 | Stroke width, this rapresent the progress line
| Name | Default | Description
| -------------------------- | ----------- | --------------------
| --progress-from-bottom | 10% | Absolute positioning the progress number from bottom--progress-from-left
| | 50% | Absolute positioning the progress number from left --title-from-top
| | 40% | Absolute positioning the title from top--title-from-left
| | 50% | Absolute positioning the title from left--bk-color
| |transparent| Background color inside the circle--progress-stroke-color
| | #e9008d | Progress stroke color--progress-stroke-gradient-color
| | '' | Progress stroke stop-color if you want a gradient effect--progress-stroke-linecap
| | butt | SVG stroke linecap ( butt | round | square )--progress-opacity
| | .9 | Opacity on progress stroke--footprint-stroke-color
| |transparent| Track under the progress stroke can be visible or transparent--footprint-opacity
| | 0 | Opacity on footprint stroke--progress-font-family
| |sans-serif | Font family for the progress counter--progress-font-size
| | 2rem | Font size for the progress counter--progress-font-weight
| | 400 | Font weight for the progress counter--progress-font-color
| | #000 | Font color for the progress counter--title-font-family
| |sans-serif | Font family for the title--title-font-size
| | 1.2rem | Font size for the title--title-font-color
| | #000 | Font color for the title