torrezmn/circleprogressbar

Small component for circle progress bars.

CircleProgressBar

Small component to display circle progress bars, completely responsive.

Installation

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

Usage

In your component, you can import the component as fallows:

import "@torrez_mn/circle_progress_bar";

then you cand work with the tomponent.

With required props.

• Required props to work.

{/*With required props.*/}
<cp-card cp-percentaje="30" cp-skill="html" />

With optional props.

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

DEMO

See a Code Sandbox React demo here.

Docs

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