@torrez_mn/circle_progress_bar

1.0.8 • Public • Published

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

Package Sidebar

Install

npm i @torrez_mn/circle_progress_bar

Weekly Downloads

0

Version

1.0.8

License

MIT

Unpacked Size

43.3 kB

Total Files

7

Last publish

Collaborators

  • torrez_mn