❤
npm
Sign UpSign In

progress-arc-component

2.7.0 • Public • Published

Simple progress arc for React (demo) NPM version Build status

Installation

$ yarn add progress-arc-component

Usage

import ProgressArc from 'progress-arc-component'
 
<ProgressArc value={63}/>

ProgressArc screenshot

Properties

Name Description Default
value Current progress 0
max Maximum value 100
unit Value unit %
arcColor Progress arc color #818a91
arcBackgroundColor Arc background color #eceeef
textColor Text color #818a91
textVisible Show text inside arc true
radius Arc radius 90
rounded Draw rounded corners false

Customization

ProgressArc generates SVG that can be tweaked with styled-components:

import styled from 'styled-components'
 
const StyledProgressArc = styled(ProgressArc)`
  height: 12em;
  width: 12em;
  border: 0.3em solid black;
  border-radius: 0.5em;
  padding: 1em;
`

/progress-arc-component/

    Package Sidebar

    Install

    npm i progress-arc-component

    Repository

    github.com/szastupov/progress-arc-component

    Homepage

    github.com/szastupov/progress-arc-component#readme

    Weekly Downloads

    246

    Version

    2.7.0

    License

    MIT

    Unpacked Size

    11 kB

    Total Files

    8

    Last publish

    Collaborators

    • szastupov
    Try on RunKit
    Report malware