Material UI is a Material Design library made for React.
It’s a set of React components that have Material Design styles.
In this article, we’ll look at how to add progress bars with Material UI.
We can use the LinearProgress
component to add a horizontal progress bar.
For example, we can write:
import React from "react";
import LinearProgress from "@material-ui/core/LinearProgress";
export default function App() {
return (
<div>
<LinearProgress />
</div>
);
}
We just add it and it’ll show an animated progress bar.
To change the style, we can set the color
property:
import React from "react";
import LinearProgress from "@material-ui/core/LinearProgress";
export default function App() {
return (
<div>
<LinearProgress color="secondary" />
</div>
);
}
Now it’ll be pink.
If we want to show a progress bar until something is done, we can set the value
prop to control the progress.
We also need the variant
prop set to determinate
to set determinate progress.
For example, we can write:
import React from "react";
import LinearProgress from "@material-ui/core/LinearProgress";
export default function App() {
const [progress, setProgress] = React.useState(0);
React.useEffect(() => {
const timer = setInterval(() => {
setProgress(oldProgress => {
if (oldProgress === 100) {
return 0;
}
return Math.min(oldProgress + 15, 100);
});
}, 500);
return () => {
clearInterval(timer);
};
}, []);
return (
<div>
<LinearProgress variant="determinate" value={progress} />
</div>
);
}
#technology #javascript #web-development #software-development #programming #ui