How can I smoothly animate a Material UI LinearProgress over a fixed time period?

Asked
Active3 hr before
Viewed126 times

3 Answers

smoothlylinearprogressfixedperiodanimatematerial
90%

I am trying to animate over 60 seconds and here's what I have so far:,Please be sure to answer the question. Provide details and share your research!, What is this wire connector/terminal called? , Calculating the sum of means of lists as `n` approaches infinity

The example below uses CSS rather than JS to animate the progress bar over 60 seconds. It accomplishes this by using the indeterminate variant, but then customizing its CSS. The indeterminate variant leverages two bars in its animation. This example suppresses the second bar and changes the first bar to animate over 60 seconds once instead of 2.1 seconds infinitely repeating. This example also changes the keyframes part of the animation so that it ends with a full bar, rather than ending with the bar disappearing. Using forwards in the animation causes the final state to stick when the animation finishes.

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import LinearProgress from "@material-ui/core/LinearProgress";

const useStyles = makeStyles({
  root: {
    width: "100%"
  },
  bar1Indeterminate: {
    width: "auto",
    animation: "$indeterminate1 60s linear forwards"
  },
  bar2Indeterminate: {
    display: "none"
  },
  "@keyframes indeterminate1": {
    "0%": {
      left: "-35%",
      right: "100%"
    },
    "100%": {
      left: "0%",
      right: "0%"
    }
  }
});

export default function LinearDeterminate() {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <LinearProgress
        classes={{
          bar1Indeterminate: classes.bar1Indeterminate,
          bar2Indeterminate: classes.bar2Indeterminate
        }}
        variant="indeterminate"
      />
    </div>
  );
}
load more v
88%

The API documentation of the LinearProgress React component. Learn more about the props and the CSS customization points.,If the progress bar is describing the loading progress of a particular region of a page, you should use aria-describedby to point to the progress bar, and set the aria-busy attribute to true on that region until it has finished loading.,You can override the style of the component thanks to one of these customization points:,If that's not sufficient, you can check the implementation of the component for more detail.

Import

import LinearProgress from '@material-ui/core/LinearProgress';
// or
import {
   LinearProgress
} from '@material-ui/core';
72%

Related answer: How can I smoothly animate a Material UI LinearProgress over a fixed time period?,I'm using a LinearProgressBar with the indeterminate variant in a React app to give a feedback that an action is ongoing.,I find that the animation is too fast, is there a way to reduce its speed?,How to add drop-down in each row of Material UI Table?

There is no prop provided in the LinearProgress component to adjust the animation speed so you're going to have to play with class overrides to override the default styles. In this case I'd increase the animation-duration to slow it down:

import {
   withStyles
} from "@material-ui/core/styles";
import LinearProgress from "@material-ui/core/LinearProgress";

const SlowLinearProgress = withStyles({
   bar: {
      // apply a new animation-duration to the `.bar` class
      animationDuration: "8s"
   }
})(LinearProgress);

export default SlowLinearProgress;
load more v

Other "smoothly-linearprogress" queries related to "How can I smoothly animate a Material UI LinearProgress over a fixed time period?"