├── .gitignore ├── .npmignore ├── .travis.yml ├── README.md ├── dev-tools ├── build.js ├── dev.js ├── tasks.js └── test.js ├── example ├── index.html └── index.js ├── package.json ├── resource └── examle.gif ├── spec └── index.spec.js └── src └── index.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | .DS_Store -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | src 2 | spec 3 | resource 4 | example 5 | dev-tools 6 | .gitignore 7 | .DS_Store -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - 9.11.2 -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React Pace Progress 2 | 3 | React Pace Progress is a simple [pace]-style progressbar component. 4 | 5 | ![example](https://xieguanglei.github.io/react-pace-progress/resource/examle.gif) 6 | 7 | ## Install 8 | 9 | The only way to use React-Pace-Progressbar is to install it from NPM. 10 | 11 | ``` 12 | $ npm install react-pace-progress --save 13 | ``` 14 | 15 | You need to import it and include in your own React build progress (using Webpack, e.g). 16 | 17 | ``` 18 | import Pace from 'react-pace-progress' 19 | ``` 20 | 21 | ## Usage 22 | 23 | Use `Pace` like any other react component. `Pace` renders a thin horizontal progressbar infinitely approaching 100%. It never reaches 100%. 24 | 25 | ``` 26 | // inside your react component 27 | 28 | load = ()=>{ 29 | this.setState({isLoading: true}); 30 | fetch().then(()=>{ 31 | // deal with data fetched 32 | this.setState({isLoading: false}) 33 | }) 34 | }; 35 | 36 | render(){ 37 | return ( 38 |
39 | {this.state.isLoading ? : null} 40 | ... content 41 |
42 | ) 43 | } 44 | ``` 45 | 46 | ## Props 47 | 48 | Use props to custom Pace component. 49 | 50 | - height: `number`, progressbar height in pixels. 51 | - color: `string`, progressbar color. 52 | 53 | [pace]: http://github.hubspot.com/pace/ 54 | -------------------------------------------------------------------------------- /dev-tools/build.js: -------------------------------------------------------------------------------- 1 | const tasks = require('./tasks'); 2 | 3 | tasks.build(); -------------------------------------------------------------------------------- /dev-tools/dev.js: -------------------------------------------------------------------------------- 1 | const tasks = require('./tasks'); 2 | 3 | tasks.dev(); -------------------------------------------------------------------------------- /dev-tools/tasks.js: -------------------------------------------------------------------------------- 1 | const dalaran = require('dalaran'); 2 | 3 | const tasks = dalaran.libraryTasks({ 4 | demo: './example', 5 | umdName: 'Pace', 6 | react: true, 7 | libExternals: ['react', 'prop-types'], 8 | testEntryPattern: './spec/**/*.spec.js' 9 | }); 10 | 11 | module.exports = tasks; -------------------------------------------------------------------------------- /dev-tools/test.js: -------------------------------------------------------------------------------- 1 | const tasks = require('./tasks'); 2 | 3 | tasks.test(); -------------------------------------------------------------------------------- /example/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 7 | 8 | Document 9 | 10 | 11 | 12 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /example/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render } from 'react-dom'; 3 | 4 | import Pace from '../src/index'; 5 | 6 | render(, document.getElementById('main')); -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-pace-progress", 3 | "version": "2.0.0", 4 | "description": "react pace", 5 | "main": "dist/pace.min.js", 6 | "scripts": { 7 | "dev": "node ./dev-tools/dev.js", 8 | "build": "node ./dev-tools/build.js", 9 | "test": "node ./dev-tools/test.js", 10 | "prepublishOnly": "npm run build" 11 | }, 12 | "author": "xieguanglei@hotmail.com", 13 | "repository": "xieguanglei/react-pace-progress", 14 | "license": "MIT", 15 | "keywords": [ 16 | "react", 17 | "react-component", 18 | "progress", 19 | "progress-bar" 20 | ], 21 | "devDependencies": { 22 | "dalaran": "^0.2.4", 23 | "expect": "^23.6.0", 24 | "react-dom": "^16.6.3" 25 | }, 26 | "dependencies": { 27 | "prop-types": "^15.6.2", 28 | "react": "^16.6.3" 29 | } 30 | } -------------------------------------------------------------------------------- /resource/examle.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xieguanglei/react-pace-progress/f32975843c212cb2a13229447bce548ccda8ca77/resource/examle.gif -------------------------------------------------------------------------------- /spec/index.spec.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render } from 'react-dom'; 3 | import Pace from '../src/index'; 4 | 5 | import expect from 'expect'; 6 | 7 | describe('react-pace-progress', function () { 8 | 9 | let node; 10 | 11 | beforeEach((done) => { 12 | node = document.createElement('div'); 13 | document.body.appendChild(node); 14 | render(, node, done); 15 | }); 16 | 17 | it('progressbar should mount', function () { 18 | const barNode = node.querySelector('.react-pace-element'); 19 | expect(barNode).toBeInstanceOf(HTMLDivElement); 20 | }) 21 | 22 | }); 23 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import PropTypes from 'prop-types'; 3 | 4 | class Pace extends Component { 5 | 6 | static propTypes = { 7 | height: PropTypes.number, 8 | color: PropTypes.string, 9 | style: PropTypes.object, 10 | id: PropTypes.string, 11 | className: PropTypes.string 12 | }; 13 | 14 | state = { 15 | width: 0 16 | }; 17 | 18 | componentDidMount() { 19 | this.intervalId = setInterval(() => { 20 | this.setState({ 21 | width: this.state.width + (1 - this.state.width) * 0.2 22 | }) 23 | }, 500 + 200 * Math.random()); 24 | } 25 | 26 | componentWillUnmount() { 27 | clearInterval(this.intervalId); 28 | } 29 | 30 | getStyles = () => { 31 | const styles = { 32 | main: { 33 | height: this.props.height || 10, 34 | backgroundColor: this.props.color || '#2c3e50', 35 | transition: 'width 0.5s', 36 | width: Math.floor(this.state.width * 100) + '%' 37 | }, 38 | container: { 39 | position: 'absolute', 40 | width: '100%' 41 | } 42 | }; 43 | 44 | if (this.props.style) { 45 | styles.main = Object.assign({}, this.props.style, styles.main); 46 | } 47 | 48 | return styles; 49 | }; 50 | 51 | render() { 52 | const styles = this.getStyles(); 53 | 54 | const {id, className} = this.props; 55 | 56 | return ( 57 |
58 |
59 |
60 | ); 61 | } 62 | } 63 | 64 | export default Pace; 65 | --------------------------------------------------------------------------------