title: Animating MUI LinearProgress with stripes
body: <p>I would like to animate MUI LinearProgress. I do have the animation keyframes code with me, but not sure on how to get the stripes working. Please advice.</p>
  <p>This is my code:</p>
  <pre><code>import React, { FunctionComponent } from 'react';
  import { Box, LinearProgress, LinearProgressProps } from '@mui/material';
  import { styled, keyframes } from '@mui/material/styles';
  
  const stripes = keyframes`
    from {
      background-position: 0 0;
    }
  
    to {
      background-position: 30 0;
    }
  `;
  
  const BorderLinearProgress = styled(LinearProgress)(({ theme }) =&gt; ({
    height: 8,
    borderRadius: 5,
    animation: `${stripes} .3s linear infinite reverse`,
  }));
  
  const LinearProgressBar: FunctionComponent&lt;LinearProgressProps&gt; = (props) =&gt; {
    return (
      &lt;Box sx={{ width: '100%' }}&gt;
        &lt;BorderLinearProgress {...props} /&gt;
      &lt;/Box&gt;
    );
  };
  
  export default LinearProgressBar;
  </code></pre>
  <p>Expected Output: Similar to <a href="https://blueprintjs.com/docs/#core/components/progress-bar" rel="nofollow noreferrer">this</a></p>
  <p>Blueprint CSS: <a href="https://github.com/palantir/blueprint/blob/develop/packages/core/src/components/progress-bar/_progress-bar.scss" rel="nofollow noreferrer">CSS Link</a></p>
  <p>Stackblitz Link: <a href="https://stackblitz.com/edit/react-ts-biodby?file=App.tsx,index.tsx" rel="nofollow noreferrer">Link</a></p>