Small component to display circle progress bars, completely responsive.
You can install this component in your project with the fallowing command:
npm i @torrez_mn/circle_progress_bar
or by:
npm install @torrez_mn/circle_progress_bar
In your component, you can import the component as fallows:
import "@torrez_mn/circle_progress_bar";
then you cand work with the tomponent.
- Required props to work.
{/*With required props.*/}
<cp-card cp-percentaje="30" cp-skill="html" />
- Optional props to work.
{/*With optional props.*/}
<cp-card
cp-percentaje="20"
cp-skill="html5"
cp-text-color="orange"
cp-background="rgba(0,0,0,.3)"
/>
See a Code Sandbox React demo here.
Brief description of the component's props.
prop | description | required |
---|---|---|
cp-percentaje | The percentaje value to be drawn by the progress bar. | REQUIRED |
cp-skill | Percentaje description to show behind value. | REQUIRED |
cp-text-color | Color of text, value and bar color in the component. | OPTIONAL |
cp-background | Color of the card background. | OPTIONAL |