# Progress demo

- order: 0

基本用法

---

````js

/** @jsx createElement */
import { createElement, Component, render } from 'rax';
import View from 'nuke-view';
import Text from 'nuke-text';
import Button from 'nuke-Button';
import Page from 'nuke-page';
import Progress from 'nuke-progress';

let App = class NukeDemoIndex extends Component {
  constructor() {
    super();
    this.changeRate = this.changeRate.bind(this);
    this.state={
      rate: 0.8
    }
  }
  changeRate(){
    this.setState({
      rate: 0.6
    });
  }

  render() {
    return (
      <Page title="Progress">
        <Page.Intro main="基础样式"></Page.Intro>
        <View style={styles.line}>
          <Progress rate={this.state.rate} style={styles.progress} />
        </View>
        <Button type="primary" onPress={this.changeRate}>
          点我
        </Button>
        <View style={styles.line}>
          <Progress rate={0.7} barStyle={{backgroundColor:'#ff6600'}} />
        </View>
      </Page>
    );
  }
}
const styles={
  line:{
    marginTop:30,
    height:100,
  },
  progress:{
    width:750,
    height:10,
  }
}
render(<App />);


````