https://github.com/szastupov/progress-arc-component

Simple progress arc for React, customizable with styled-components
https://github.com/szastupov/progress-arc-component

react styled-components

Last synced: about 2 months ago
JSON representation

Simple progress arc for React, customizable with styled-components

• Host: GitHub
• URL: https://github.com/szastupov/progress-arc-component
• Owner: szastupov
• Created: 2017-01-08T20:14:07.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2020-09-05T03:14:58.000Z (over 4 years ago)
• Last Synced: 2024-10-28T11:12:15.390Z (about 2 months ago)
• Topics: react, styled-components
• Language: JavaScript
• Size: 2.08 MB
• Stars: 45
• Watchers: 3
• Forks: 6
• Open Issues: 2
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Simple progress arc for React ([demo](http://szastupov.github.io/progress-arc-component)) [![NPM version][npm-image]][npm-link] [![Build status][travis-image]][travis-link]

## Installation

    $ yarn add progress-arc-component

## Usage

```javascript

import ProgressArc from 'progress-arc-component'

```

![ProgressArc screenshot](http://i.imgur.com/vgxgdi9.png)

### 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][1]:

```javascript

import styled from 'styled-components'

const StyledProgressArc = styled(ProgressArc)`

  height: 12em;

  width: 12em;

  border: 0.3em solid black;

  border-radius: 0.5em;

  padding: 1em;

`

```

[1]: https://github.com/styled-components/styled-components

[npm-image]: https://img.shields.io/npm/v/progress-arc-component.svg?style=flat

[npm-link]: https://npmjs.org/package/progress-arc-component

[travis-image]: https://img.shields.io/travis/szastupov/progress-arc-component.svg?style=flat

[travis-link]: https://travis-ci.org/szastupov/progress-arc-component