title: How to create a rating bar(Or linear gauge) using material UI (React)
body: <p>I am new to React, I want to create a rating bar like this:
  <a href="https://i.stack.imgur.com/UB4SA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UB4SA.png" alt="enter image description here" /></a></p>
  <p>I want to use material UI, but I didn't find a component like this.
  I found a rating UI component: <a href="https://material-ui.com/components/rating/" rel="nofollow noreferrer">https://material-ui.com/components/rating/</a>. but I need the UI to be like a linear gauge and change color with a different number (<code>1/5, 2/5,3/5,4/5,5/5)</code>.</p>
  <p>Actually, I already used the rating component:</p>
  <pre><code>                &lt;Grid item xs={6} className={classes.overAllScoreValueContainer}&gt;
                      &lt;Box component=&quot;fieldset&quot; marginLeft={0} marginTop={0.25} padding={0} borderColor=&quot;transparent&quot;&gt;
                          &lt;Rating
                              name=&quot;overall-score&quot;
                              value={this.state.overAllRating}
                              readOnly
                              size={&quot;large&quot;}
                              classes={{
                                  iconFilled: this.props.classes.iconFilled,
                                  iconHover: this.props.classes.iconHover
                              }}
                          /&gt;
                      &lt;/Box&gt;
                  &lt;/Grid&gt;
  </code></pre>
  <p>but the UI is not correct.</p>
  <p>anyone can help?</p>
  <p>Thank you for pointing out using the progress bar in material UI.
  I can make the shape like what shown in the picture, but how to change color according to the value??
  please check this:
  <a href="https://codesandbox.io/s/charming-water-cx6dd?file=/demo.js" rel="nofollow noreferrer">https://codesandbox.io/s/charming-water-cx6dd?file=/demo.js</a></p>