1.1.0 • Published 4 years ago
react-es6-progressbar.js v1.1.0
React ES6 ProgressBar.js
A React component library that implements kimmobrunfeldt's ProgressBar.js with full options support.
Installation
$ npm install --save react-es6-progressbar.js
Usage
import React, { Component } from 'react';
import { Circle, SemiCircle, Line } from 'react-es6-progressbar.js'
class App extends Component{
const circle_options = {
text: 'test',
style: {
color: 'green'
}
};
const semicircle_options = {
text: {
value: 'semicircle test',
color: 'rgba(255, 255, 255, 0.6)
},
color: '#333',
duration: 1000
};
const line_options = {
color: 'red',
easing: 'easeOut',
strokeWidth: '5'
};
render(){
return(
<Circle progress={0.75} options={circle_options} container_style={{height: '200px', width: '200px'}} />
<SemiCircle progress={0.33} options={semicircle_options} container_style={{height: '200px', width: '200px'}} />
<Line progress={1.0} options={line_options} container_style={{height: '200px', width: '200px'}} />
);
}
}
Props
Prop | Type | Default | Usage |
---|---|---|---|
container_class | String | null | Class to be added to container element |
container_style | Object | null | CSS styles for the container element |
progress | Number | 0.5 | ProgressBar.js progress amount from 0 to 1, where 1 is 100% of the distance. |
options | Object | null | ProgressBar.js shape container options |
Licence
MIT
1.1.0
4 years ago
1.0.20
6 years ago
1.0.19
6 years ago
1.0.18
6 years ago
1.0.17
6 years ago
1.0.16
6 years ago
1.0.15
6 years ago
1.0.14
6 years ago
1.0.13
6 years ago
1.0.12
6 years ago
1.0.11
6 years ago
1.0.10
6 years ago
1.0.8
6 years ago
1.0.7
6 years ago
1.0.6
6 years ago
1.0.5
6 years ago
1.0.3
6 years ago
1.0.2
6 years ago
1.0.1
6 years ago
1.0.0
6 years ago