import Box from '../../box';
import Progress from '..';
import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
  <div>
    <Box direction="row" spacing={20}>
      <Progress percent={30} size="small" shape="circle" />
      <Progress percent={50} size="medium" shape="circle" />
      <Progress percent={90} size="large" shape="circle" />
    </Box>
    <br />
    <Box direction="row" spacing={20}>
      <Progress percent={30} strokeSize='bold' shape="circle" />
      <Progress percent={50} strokeSize="medium" shape="circle" />
      <Progress percent={90} strokeSize="thin" shape="circle" />
    </Box>
    <br />
    <Box direction="column" spacing={20}>
      <Progress percent={30} size="small" />
      <Progress percent={50} size="medium" />
      <Progress percent={90} size="large" />
    </Box>
  </div>,
  document.getElementById('progress-demo-3'),
);