To animate the Circular Progress with a label on load in Material-UI 5, you can use CSS transitions or React animation libraries like react-transition-group. In this example, I'll demonstrate how to use CSS transitions to animate the Circular Progress component on load.

  1. Set up the CircularProgress with Label: Start by creating a component that includes the Circular Progress component along with a label.
jsx
import React from 'react'; import { CircularProgress, Typography } from '@mui/material'; const CircularProgressWithLabel = ({ value }) => { return ( <div style={{ position: 'relative' }}> <CircularProgress variant="determinate" value={value} /> <Typography variant="caption" component="div" style={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)' }} > {`${Math.round(value)}%`} </Typography> </div> ); }; export default CircularProgressWithLabel;
  1. Animate on Load with CSS Transitions: To animate the CircularProgress component on load, you can use CSS transitions to control the transform property of the Circular Progress label. The transform property will transition from scale(0) (hidden) to scale(1) (visible) on load.
css
/* styles.css or your style file */ .circular-progress-container { position: relative; opacity: 0; transform: scale(0); transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out; } .circular-progress-container.visible { opacity: 1; transform: scale(1); }
  1. Use the CircularProgressWithLabel Component: Finally, use the CircularProgressWithLabel component and control its visibility with CSS classes to trigger the animation.
jsx
import React, { useEffect, useState } from 'react'; import CircularProgressWithLabel from './CircularProgressWithLabel'; import './styles.css'; // Import your styles file with the CSS transitions const App = () => { const [loading, setLoading] = useState(true); useEffect(() => { // Simulate an asynchronous task that takes some time to load setTimeout(() => { setLoading(false); }, 2000); }, []); return ( <div className={`circular-progress-container ${loading ? '' : 'visible'}`}> <CircularProgressWithLabel value={loading ? 0 : 75} /> </div> ); }; export default App;

In this example, the CircularProgressWithLabel component is wrapped in a div with the class name circular-progress-container. Initially, the container has opacity: 0 and transform: scale(0) to hide the CircularProgress component. When the visible class is added to the container, the CSS transitions animate the CircularProgress label from being hidden to being visible.

Remember to adjust the transition duration and animation styles in the CSS according to your preference.

By following these steps, you can create a Circular Progress with a label that animates on load using CSS transitions in Material-UI 5.

Have questions or queries?
Get in Touch