content: import React from 'react'
  
  import styles from './styles.css'
  
  // View
  class PageProgress extends React.Component {
    elapsedPercent () {
      if (this.props.elapsed === 0) {
        return 0
      }
      return this.props.elapsed * 100 / (this.props.total - 1)
    }
    render () {
      let percent = this.elapsedPercent()
      let rootStyle = {
        // opacity: percent < 100 ? 1 : 0,
        WebkitTransition: `${this.props.speed}s opacity`,
        transition: `${this.props.speed}s opacity`,
        WebkitTransitionDelay: `${percent < 100 ? 0 : this.props.hideDelay}s`,
        transitionDelay: `${percent < 100 ? 0 : this.hideDelay}s`
      }
      let barStyle = {
        width: `${percent}%`,
        WebkitTransition: `${this.props.speed}s width, ${this.props.speed}s background-color`,
        transition: `${this.props.speed}s width, ${this.props.speed}s background-color`
      }
      return (
        <div className={styles.root} style={rootStyle}>
          <div className={styles.bar} style={barStyle}></div>
        </div>
      )
    }
  }
  
  // Model
  PageProgress.propTypes = {
    isEnabled: React.PropTypes.bool,
    elapsed: React.PropTypes.number,
    total: React.PropTypes.number,
    speed: React.PropTypes.number,
    hideDelay: React.PropTypes.number
  }
  
  PageProgress.defaultProps = {
    isEnabled: false,
    elapsed: 0,
    total: 0,
    speed: 0.9,
    hideDelay: 0.1
  }
  
  // API
  export default PageProgress
  