Preact Progress

Demo for https://github.com/lukeed/preact-progress

by Luke Edwards

HTML

<script src="https://npmcdn.com/preact"></script>
<script src="https://unpkg.com/[email protected]/dist/preact-progress.min.js"></script>
<ul id="log"></ul>

CSS

body {margin:0;padding:0;}

.demo, #log {
  width: 400px;
}

.demo {
  padding: 5vh 2vw;
  text-align: center;
}

.demo-progress {
  position: fixed;
  left: 0;
}

#log {
  position: absolute;
  left: calc(50% - 200px);
  line-height: 1.4;
  font-family: Helvetica;
  top: 10vh;
}

Babel + JSX

const { h, Component, render } = preact;
/** @jsx h */

let timer;

const log = document.getElementById('log');
const logger = str => {
  const li = document.createElement('li');
  li.innerText = str;
  log.appendChild(li);
};

const onStart = () => logger('Started!');
const onChange = (_, val) => logger(`Changed! ${val}%`);
const onComplete = () => {
	clearTimeout(timer);
  logger('Done!');
}

class Demo extends Component {
	state = {
  	progress: 0
  };

	go = int => {
    this.setState({progress: int});
    clearInterval(timer);
    timer = setInterval(() => {
    	this.setState({
      	progress: (this.state.progress * 1.3).toFixed(2)
      });
    }, 800);
  };

	render(_, { progress }) {
    const Button = ({num}) => (
    	<button onClick={() => this.go(num)}>
        Set to {num}%
      </button>
    );
    
		return (
      <div className="demo">
        <Button num={10} />
        <Button num={60} />
        <Button num={90} />
        <Progress
          height="3px"
          color="#6cc644"
          value={ progress }
          className="demo-progress"
          onComplete={ onComplete }
          onChange={ onChange }
          onStart={ onStart }
        />
      </div>
		);
	}
}

render(<Demo />, document.body);