!GitHub issues

🪐 \

Simple customizable progress ring 🪐!

$3

!Example One

``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

`

$3

!Example Two

`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

`

$3

!Example Four

`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

`

$3

!Example Four

`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

`

🚀 Usage

1. Install package
`bash
npm install --save @cicciosgamino/progress-ring
`

2. Import
`html


`

3. Place in your HTML
`html

`

🐝 API

$3

| 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

$3

| 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

$3