Creating dynamic stripes on MUI LinearProgress for lively animations

I'm looking to add animation to MUI LinearProgress. I have the animation keyframes code, but I'm not sure how to implement the stripes effect. Any advice would be appreciated.

Here is the code snippet I have:

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;

Desired Output: Similar to this example

Blueprint CSS: CSS Reference Link

Check out the code on Stackblitz: Link

Answer â„–1

Is this what you're looking for?

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 CustomLinearProgressBar = 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 StyledLinearProgressBar: React.FC<LinearProgressProps> = (props) => {
  return (
    <Box sx={{ width: '100%' }}>
      <CustomLinearProgressBar {...props} />
    </Box>
  );
};

export default StyledLinearProgressBar;

Check out the demo here: https://stackblitz.com/edit/react-ts-ci7hxg?file=App.tsx,index.tsx

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to create a full-window image cover starting from the center point and extending to the right by 50

Seeking assistance from anyone who can help me with my current issue. I am currently utilizing bootsrap 4 and I need to come up with a solution for the following scenario: I have one element that is situated within the standard six columns, while the secon ...

Error message: Encountered JavaScript heap out-of-memory error during Azure DevOps React Container Production Build

I am facing challenges in building a React production Docker container with Azure DevOps pipelines. Despite upgrading my build environment and code, the pipeline failed to run successfully. After conducting some research, I attempted to add the "--node-fla ...

What is the best way to establish the primary color for the entire app?

Is there a way to easily set the color for @react-native-material/core's theme? I managed to change the color but I don't want to have to do it individually for each component. ...

Can the navigation bar be filled automatically with content that corresponds to the anchors found within the content?

Currently, I am utilizing a Bootstrap frontend for the project at hand. The task I am tackling involves a significant amount of automatically generated content and code, which greatly simplifies the work process. My goal is to explore the potential of cre ...

Utilize CSS to format the output of a script embedded within

When I embed the following script in my HTML, the output doesn't have any styling. How can I style the script output to blend well with the existing HTML structure? I tried accessing the output by ID, but couldn't figure it out. <script> ...

Updating classes when useState changes in React JS

I'm currently working on implementing a carousel slider in React. As I track the state to determine the specific class to add based on the state value (e.g., adding "-left-1/3" when the state is 2), everything seems to be functioning correctly. Howeve ...

Attempting to position the calendar control at the center in Visual Studio using C#

I'm currently working in Visual Studio using C# and I've encountered an issue with centering a Calendar control within a Panel. While I have successfully centered other elements such as radiobuttons, checkboxes, and textboxes in the panel, the t ...

What is preventing me from retrieving data from my MongoDB database?

There are no errors showing, and even the console confirms that the database is connected. However, the data is not being displayed when I navigate to http://localhost:5000/tasks. Cannot GET /tasks I'm wondering what I might be missing here? const ...

Unexpected outcomes when trying to sort and paginate React-Table

Experiencing unexpected results with react-table integration for pagination and sorting. Merged examples from the react-table repository. Encountering an issue where table hooks reset the page index on re-render, causing fetchData to be called twice during ...

Tips for highlighting text in HTML without using a specific tag

My current project involves customizing a Wordpress plugin, but I've encountered a frustrating obstacle. I'm having trouble removing the three dots that appear at the bottom of the download card. Despite my efforts, I can't seem to find any ...

Attempting to toggle the visibility of div elements through user interaction

I'm having an issue with click events on several elements. Each element's click event is supposed to reveal a specific div related to it, but the hidden divs are not appearing when I click on the elements. Any help in figuring out what might be g ...

What are the steps for utilizing custom components in React?

Below is the content of my app.js file: import React from 'react' import navAritro from './components/navAritro'; function App() { return ( <navAritro></navAritro> ) } export default App; This is what I have in ...

increasing the top margin on an HTML document

Looking to create a specific amount of blank space at the top of your HTML page? The space needs to be exactly X pixels tall. How can this be achieved effectively, while ensuring compatibility with Safari? ...

The mobile devices are not showing my HTML website

I have implemented the following CSS link code on my website: <link rel="stylesheet" href="index_files/front.css" media="all" type="text/css" > Additionally, I have included the following code <meta name="HandheldFriendly" content="True"> & ...

Is it possible for Angular's `HttpClient` to use complex property types in the `.get()` generics aside from just `string` or `number`?

After spending an entire day researching the topic, I've hit a dead end. All my efforts have only led me to discover one thing—omission. None of the information I've come across mentions whether you can utilize non-simple types (such as string ...

Is there a way to directly access the React component that was clicked?

I'm looking to dynamically change the class of a component when clicked. By using state to create a new component with properties such as name and done (initiated as false), which are then added to the todos array, I want to find out how to identify t ...

What is the best way to test a Redux dumb component that displays smart components?

One way to test a "dumb" React view is by supplying it with props and using tools like enzyme or jsdom. Snapshot testing with jest can then be used to confirm the behavior. For a smart component made up of a 'dumb view' connected with mapStateTo ...

There was a hiccup encountered while trying to follow the steps for creating a

Despite others' attempts to solve the errors quickly, the search continues and the symptoms persist. > <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="046c6168686b29766165677044342a352a34">[email protected]< ...

MaterialUI's Tooltip component is causing warning messages to appear on the client's console

Issues with MaterialUI Tooltip causing warnings in client console "Failed prop type". However, the mentioned props are not used in my components. Warnings displayed on client console: Warning: Failed prop type: The following properties are not supported: ...

One choice grid

Greetings, I am currently working on implementing selection logic for my material ui grid (table). Below is the code snippet that I have written: return ( <Paper sx={{ width: "100%", overflow: "hidden" }}> <Table sty ...