├── .gitignore ├── README.md ├── bower.json ├── example ├── demo.gif └── index.html ├── package.json ├── react-pacman-progress.css └── react-pacman-progress.js /.gitignore: -------------------------------------------------------------------------------- 1 | # https://git-scm.com/docs/gitignore 2 | # https://help.github.com/articles/ignoring-files 3 | # Example .gitignore files: https://github.com/github/gitignore 4 | /bower_components/ 5 | /node_modules/ 6 | .DS_Store -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # react-pacman-progress 2 | 3 | > Simple [React](http://facebook.github.io/react/index.html) component for a fun progress indicator. 4 | 5 | ### [Demo](https://mathieudutour.github.io/react-pacman-progress) 6 | 7 | [![Demo](https://cdn.rawgit.com/mathieudutour/react-pacman-progress/master/example/demo.gif "Demo")](https://github.com/mathieudutour/react-pacman-progress/blob/master/example/index.html) 8 | 9 | ## Install 10 | 11 | ```bash 12 | npm install react-pacman-progress --save 13 | ``` 14 | 15 | or 16 | 17 | ```bash 18 | bower install react-pacman-progress --save 19 | ``` 20 | 21 | ## Example 22 | 23 | Controlled usage: 24 | 25 | ```javascript 26 | var PacmanProgress = require('react-pacman-progress'); 27 | 28 | var App = React.createClass({ 29 | getInitialState() { 30 | return {currentIndex: 0}; 31 | }, 32 | render() { 33 | var slides = [ 34 | {color: '#c0ffee'}, 35 | {color: '#deface'}, 36 | {color: '#0ff1ce'} 37 | ] 38 | return ( 39 |
40 | { 41 | slides.map(function(slide, i) { 42 | return ; 43 | }.bind(this)) 44 | } 45 | 46 |
47 | ); 48 | }, 49 | 50 | handleClick: function() { 51 | this.setState({currentIndex: this.state.currentIndex + 1}); 52 | } 53 | }); 54 | ``` 55 | 56 | ## API 57 | 58 | ### Props 59 | 60 | ##### classNamespace 61 | 62 | Namespace for CSS classes, _optional_, default is `` i.e CSS classes are `'' + 'pacman'`. 63 | 64 | ##### items 65 | 66 | Number of dots for pacman to eat. _required_ 67 | 68 | ##### currentIndex 69 | 70 | Position of the pacman. Start at 0. _required_ 71 | 72 | ##### onClick 73 | 74 | Function to call when clicking on a dot. _optional_, it takes 3 arguments: 75 | * index of the dot clicked 76 | * whether it was pacman which was clicked or not 77 | * the event 78 | 79 | ``` 80 | handleClickPacman(index, isPacman, e) { 81 | e.preventDefault(); 82 | this.setState({currentIndex: index}); 83 | } 84 | ``` 85 | 86 | ## Styles 87 | 88 | Look at [react-pacman-progress.css](https://github.com/mathieudutour/react-pacman-progress/blob/master/react-pacman-progress.css) for an idea on how to style this component. 89 | 90 | --- 91 | 92 | MIT Licensed 93 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-pacman-progress", 3 | "main": [ 4 | "react-pacman-progress.js", 5 | "react-pacman-progress.css" 6 | ], 7 | "version": "0.2.0", 8 | "homepage": "https://github.com/mathieudutour/react-pacman-progress", 9 | "description": "Simple react.js component for a fun prgress indicator", 10 | "keywords": [ 11 | "react", 12 | "progress", 13 | "pacman", 14 | "component", 15 | "javascript", 16 | "react-component" 17 | ], 18 | "authors": [ 19 | "Mathieu Dutour " 20 | ], 21 | "license": "MIT", 22 | "ignore": [ 23 | "**/.*", 24 | "node_modules", 25 | "bower_components", 26 | "test", 27 | "tests", 28 | "example" 29 | ], 30 | "dependencies": { 31 | "react": "^0.12.0" 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /example/demo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mathieudutour/react-pacman-progress/b4c326f53fe08429f1a160c7edf16e2f2e050fde/example/demo.gif -------------------------------------------------------------------------------- /example/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | react-pacman-progress example (without JSX) 5 | 6 | 32 | 33 | 34 |
35 | 36 | 37 | 85 | 86 | 87 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-pacman-progress", 3 | "version": "0.2.1", 4 | "description": "Simple react.js component for a fun prgress indicator", 5 | "main": "react-pacman-progress.js", 6 | "peerDependencies": { 7 | "react": "0.x" 8 | }, 9 | "scripts": {}, 10 | "repository": { 11 | "type": "git", 12 | "url": "https://github.com/mathieudutour/react-pacman-progress" 13 | }, 14 | "keywords": [ 15 | "react", 16 | "progress", 17 | "pacman", 18 | "component", 19 | "javascript", 20 | "react-component" 21 | ], 22 | "author": "Mathieu Dutour", 23 | "license": "MIT", 24 | "bugs": { 25 | "url": "https://github.com/mathieudutour/react-pacman-progress/issues" 26 | }, 27 | "homepage": "https://github.com/mathieudutour/react-pacman-progress" 28 | } 29 | -------------------------------------------------------------------------------- /react-pacman-progress.css: -------------------------------------------------------------------------------- 1 | .pacman-progress { 2 | position: absolute; 3 | bottom: 100px; 4 | left: 50%; 5 | transition: all 1s ease-in-out 0.2s; 6 | } 7 | .pacman { 8 | position: absolute; 9 | transition: left 0.3s ease-in-out 0.2s; 10 | width: 20px; 11 | height: 20px; 12 | transform: translate(-5px, -5px); 13 | } 14 | .pacman::before { 15 | position: absolute; 16 | content: " "; 17 | width: 20px; 18 | height: 10px; 19 | border-top-left-radius: 10px; 20 | border-top-right-radius: 10px; 21 | background: #FFF; 22 | } 23 | 24 | .pacman::after { 25 | position: absolute; 26 | content: " "; 27 | width: 20px; 28 | height: 10px; 29 | border-bottom-left-radius: 10px; 30 | border-bottom-right-radius: 10px; 31 | background: #FFF; 32 | top: 10px; 33 | } 34 | 35 | .pacman.even::before { 36 | animation: pacman-top 0.12s linear alternate both; 37 | animation-iteration-count: 10; 38 | } 39 | .pacman.even::after { 40 | animation: pacman-bottom 0.12s linear alternate both; 41 | animation-iteration-count: 10; 42 | } 43 | .pacman.odd::before { 44 | animation: pacman-top-bis 0.12s linear alternate both; 45 | animation-iteration-count: 10; 46 | } 47 | .pacman.odd::after { 48 | animation: pacman-bottom-bis 0.12s linear alternate both; 49 | animation-iteration-count: 10; 50 | } 51 | 52 | .point { 53 | position: absolute; 54 | float: left; 55 | background: transparent; 56 | width: 10px; 57 | height: 10px; 58 | border-width: 2px; 59 | border-style: solid; 60 | border-color: #FFF; 61 | border-radius: 50%; 62 | transition: all 0.01s ease-out 0.4s; 63 | } 64 | .point.current { 65 | opacity: 0; 66 | background: #FFF; 67 | } 68 | .point.done { 69 | display: none; 70 | } 71 | 72 | @keyframes pacman-top { 73 | 0% {transform: rotateZ(0deg);} 74 | 100% {transform: rotateZ(-30deg);} 75 | } 76 | @keyframes pacman-top-bis { 77 | 0% {transform: rotateZ(0deg);} 78 | 100% {transform: rotateZ(-30deg);} 79 | } 80 | @keyframes pacman-bottom { 81 | 0% {transform: rotateZ(0deg);} 82 | 100% {transform: rotateZ(30deg);} 83 | } 84 | @keyframes pacman-bottom-bis { 85 | 0% {transform: rotateZ(0deg);} 86 | 100% {transform: rotateZ(30deg);} 87 | } 88 | -------------------------------------------------------------------------------- /react-pacman-progress.js: -------------------------------------------------------------------------------- 1 | ;(function (root, factory) { 2 | if (typeof module !== 'undefined' && module.exports) { 3 | module.exports = factory(require('react')); 4 | } else if (typeof define === 'function' && define.amd) { 5 | define(['react'], factory); 6 | } else { 7 | root.PacmanProgress = factory(root.React); 8 | } 9 | })(this, function componentFactory(React) { 10 | var PacmanProgress = React.createClass({displayName: 'PacmanProgress', 11 | propTypes: { 12 | classNamespace: React.PropTypes.string, 13 | items: React.PropTypes.number.isRequired, 14 | currentIndex: React.PropTypes.number.isRequired, 15 | onClick: React.PropTypes.func 16 | }, 17 | 18 | getDefaultProps: function() { 19 | return { 20 | classNamespace: '', 21 | onClick: function() {} 22 | }; 23 | }, 24 | 25 | getPacmanClass() { 26 | return this.props.classNamespace + 27 | 'pacman ' + 28 | this.props.classNamespace + 29 | (this.props.currentIndex % 2 ? 'odd' : 'even'); 30 | }, 31 | 32 | getProgressClass() { 33 | const className = [this.props.classNamespace + 'pacman-progress']; 34 | if (this.props.currentIndex >= this.props.items) { 35 | className.push(this.props.classNamespace + 'complete'); 36 | } else { 37 | className.push(this.props.classNamespace + 'not-complete'); 38 | } 39 | return className.join(' '); 40 | }, 41 | 42 | getPointClass(i) { 43 | const className = [this.props.classNamespace + 'point']; 44 | if (this.props.currentIndex > i) { 45 | className.push(this.props.classNamespace + 'done'); 46 | } else if (this.props.currentIndex === i) { 47 | className.push(this.props.classNamespace + 'current'); 48 | } else { 49 | className.push(this.props.classNamespace + 'not-done'); 50 | } 51 | return className.join(' '); 52 | }, 53 | 54 | getPointPosition(i) { 55 | const position = { 56 | top: '-5px', 57 | left: (5 + 20 * (i - this.props.items / 2)) + 'px' 58 | }; 59 | return position; 60 | }, 61 | 62 | render: function() { 63 | return ( 64 | React.createElement('div', {className: this.getProgressClass()}, 65 | React.createElement('div', { 66 | className: this.getPacmanClass(), 67 | style: this.getPointPosition(this.props.currentIndex), 68 | onClick: this.props.onClick.bind(this, this.props.currentIndex, true) 69 | }), 70 | Array.apply(null, Array(this.props.items)).map(function(item, i) { 71 | return ( 72 | React.createElement('div', { 73 | className: this.getPointClass(i), 74 | style: this.getPointPosition(i), 75 | key: 'pacman-progress-' + i, 76 | onClick: this.props.onClick.bind(this, i, false) 77 | }) 78 | ); 79 | }.bind(this)) 80 | ) 81 | ); 82 | } 83 | }); 84 | 85 | return PacmanProgress; 86 | }); 87 | --------------------------------------------------------------------------------