<commit_before>
import React from 'react'
import ReactDOM from 'react-dom'
import Playground from 'component-playground'
import {Progress} from '../../../'

const linearProgress =
`class App extends React.Component {

  state = {
    progress: 0
  }

  componentDidMount () {
    this.interval = window.setInterval(() => {
      const progress = this.state.progress + 5
      if (progress > 100) {
        return window.clearInterval(this.interval)
      }
      this.setState({progress})
    }, 500)
  }

  render () {
    return (
      <div>
        <Progress.Linear percentage={this.state.progress} />
      </div>
    )
  }
}

ReactDOM.render(<App />, mountNode)`

const circularProgress =
`class App extends React.Component {

  state = {
    progress: 0
  }

  componentDidMount () {
    this.interval = window.setInterval(() => {
      const progress = this.state.progress + 5
      if (progress > 100) {
        return window.clearInterval(this.interval)
      }
      this.setState({progress})
    }, 500)
  }

  render () {
    return (
        <div style={{width: 100, height: 100}}>
          <Progress.Circular percentage={this.state.progress} />
        </div>
    )
  }
}

ReactDOM.render(<App />, mountNode)`

export default class ProgressRoute extends React.Component {

  render () {
    return (
      <div>
        <section>
          <h2>Linear progress</h2>
          <Playground
            docClass={Progress.Linear}
            codeText={linearProgress}
            scope={{React, ReactDOM, Progress}}
            noRender={false}
            collapsableCode
          />
        </section>
        <section>
          <h2>Circular progress</h2>
          <Playground
            codeText={circularProgress}
            scope={{React, ReactDOM, Progress}}
            noRender={false}
            collapsableCode
          />
        </section>
        <section>
          <h2>Specification</h2>
          <a href='https://material.google.com/components/progress-activity.html'>
            https://material.google.com/components/progress-activity.html
          </a>
        </section>
      </div>
    )
  }

}
<commit_msg>reduce size of circular progress<commit_after>
import React from 'react'
import ReactDOM from 'react-dom'
import Playground from 'component-playground'
import {Progress} from '../../../'

const linearProgress =
`class App extends React.Component {

  state = {
    progress: 0
  }

  componentDidMount () {
    this.interval = window.setInterval(() => {
      const progress = this.state.progress + 5
      if (progress > 100) {
        return window.clearInterval(this.interval)
      }
      this.setState({progress})
    }, 500)
  }

  render () {
    return (
      <div>
        <Progress.Linear percentage={this.state.progress} />
      </div>
    )
  }
}

ReactDOM.render(<App />, mountNode)`

const circularProgress =
`class App extends React.Component {

  state = {
    progress: 0
  }

  componentDidMount () {
    this.interval = window.setInterval(() => {
      const progress = this.state.progress + 5
      if (progress > 100) {
        return window.clearInterval(this.interval)
      }
      this.setState({progress})
    }, 500)
  }

  render () {
    return (
        <div style={{width: 24, height: 24}}>
          <Progress.Circular percentage={this.state.progress} />
        </div>
    )
  }
}

ReactDOM.render(<App />, mountNode)`

export default class ProgressRoute extends React.Component {

  render () {
    return (
      <div>
        <section>
          <h2>Linear progress</h2>
          <Playground
            docClass={Progress.Linear}
            codeText={linearProgress}
            scope={{React, ReactDOM, Progress}}
            noRender={false}
            collapsableCode
          />
        </section>
        <section>
          <h2>Circular progress</h2>
          <Playground
            codeText={circularProgress}
            scope={{React, ReactDOM, Progress}}
            noRender={false}
            collapsableCode
          />
        </section>
        <section>
          <h2>Specification</h2>
          <a href='https://material.google.com/components/progress-activity.html'>
            https://material.google.com/components/progress-activity.html
          </a>
        </section>
      </div>
    )
  }

}

{'fraction_non_alphanumeric': 0.12965964343598055, 'fraction_numerical': 0.012502894188469553, 'mean_word_length': 1.9896193771626298, 'pattern_counts': {'":': 0, '<': 55, '<?xml version=': 0, '>': 63, 'https://': 4, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3505409', 'n_tokens_mistral': 1285, 'n_tokens_neox': 1244, 'n_words': 248}