# Progress 基本用法

- order: 0
- title_en: Progress usage

---

```js
<NukePlayGround>
  <Progress rate={0.6} style={styles.progress} />
</NukePlayGround>
```

---

```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="基础样式" />
        <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 />);
```