title: Change color and position of CircularProgress?
body: <p>I'm trying to use CircularProgress provided by Material.</p>
  
  <p>I created this component in order to change its color:</p>
  
  <pre><code>import React, { Component } from 'react';
  import { withStyles } from '@material-ui/core/styles';
  import { CircularProgress } from '@material-ui/core';
  
  class ColoredCircularProgress extends Component {
  render() {
      const { classes } = this.props;
      return &lt;CircularProgress {...this.props} classes={{colorPrimary: classes.colorPrimary}}/&gt;;
  }
  }
  
  const styles = props =&gt; ({
      colorPrimary: {
          backgroundColor: '#FD8907',
      }
  });
  
  export default  withStyles(styles)(ColoredCircularProgress);
  </code></pre>
  
  <p>However on my site it looks like this:</p>
  
  <p><a href="https://i.stack.imgur.com/nrBcm.png" rel="noreferrer"><img src="https://i.stack.imgur.com/nrBcm.png" alt="enter image description here"></a></p>
  
  <p>My questions are : </p>
  
  <ol>
  <li><p>I want the circle to look orange and instead the circle looks still blue and it adds a square orange box behind.</p></li>
  <li><p>It also displays at the top left corner of my site. How can I place it right in the center?</p></li>
  </ol>