Animating MUI LinearProgress with stripes

a2441918 0
Viewed 24

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.

This is my 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 }) => ({
  height: 8,
  borderRadius: 5,
  animation: `${stripes} .3s linear infinite reverse`,
}));

const LinearProgressBar: FunctionComponent<LinearProgressProps> = (props) => {
  return (
    <Box sx={{ width: '100%' }}>
      <BorderLinearProgress {...props} />
    </Box>
  );
};

export default LinearProgressBar;

Expected Output: Similar to this

Blueprint CSS: CSS Link

Stackblitz Link: Link

material-ui sass reactjs css
1 Answers

Something like this?

import * as React 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: 100% 100%;
  }
`;

const BorderLinearProgress = styled(LinearProgress)(({ theme }) => ({
  height: 8,
  borderRadius: 5,
  backgroundImage: `repeating-linear-gradient(
      -45deg, 
      transparent, 
      transparent 0.6rem,
      #1976d266 0.6rem,
      #1976d266 1.2rem
    )`,
  backgroundSize: `200% 200%`,
  animation: `${stripes} 8s linear infinite`,
}));

const LinearProgressBar: React.FC<LinearProgressProps> = (props) => {
  return (
    <Box sx={{ width: '100%' }}>
      <BorderLinearProgress {...props} />
    </Box>
  );
};

export default LinearProgressBar;

Demo: https://stackblitz.com/edit/react-ts-ci7hxg?file=App.tsx,index.tsx

userx8W70
Related