Skip to main content

Progress

Please refer to MUI's official docs for more details on component's usage guide and API documentation.

Circular
Indeterminate

Use CircularProgress component for simple circular progress.

// MUI Imports
import CircularProgress from '@mui/material/CircularProgress'

const ProgressCircularIndeterminate = () => {
  return <CircularProgress />
}

export default ProgressCircularIndeterminate
Colors

Use color prop for different colored circular progress.

// MUI Imports
import CircularProgress from '@mui/material/CircularProgress'

const ProgressCircularColors = () => {
  return (
    <div className='flex gap-4'>
      <CircularProgress color='secondary' />
      <CircularProgress color='success' />
      <CircularProgress color='error' />
      <CircularProgress color='warning' />
      <CircularProgress color='info' />
    </div>
  )
}

export default ProgressCircularColors
With label

Use variant='determinate' and value props with the help of a state for circular progress with label.

10%
// React Imports
import { useEffect, useState } from 'react'

// MUI Imports
import Typography from '@mui/material/Typography'
import CircularProgress from '@mui/material/CircularProgress'
import type { CircularProgressProps } from '@mui/material/CircularProgress'

const Progress = (props: CircularProgressProps) => {
  return (
    <div className='relative inline-flex'>
      <CircularProgress variant='determinate' {...props} size={50} />
      <div className='flex absolute top-0 left-0 right-0 bottom-0 items-center justify-center'>
        <Typography variant='caption' component='div' color='text.primary'>
          {`${Math.round(props.value as number)}%`}
        </Typography>
      </div>
    </div>
  )
}

const ProgressCircularWithLabel = () => {
  // States
  const [progress, setProgress] = useState<number>(10)

  useEffect(() => {
    const timer = setInterval(() => {
      setProgress(prevProgress => (prevProgress >= 100 ? 0 : prevProgress + 10))
    }, 800)

    return () => {
      clearInterval(timer)
    }
  }, [])

  return <Progress value={progress} />
}

export default ProgressCircularWithLabel
Customization

Use styled hook to customize your circular progress.

// MUI Imports
import { styled } from '@mui/material/styles'
import CircularProgress from '@mui/material/CircularProgress'
import type { CircularProgressProps } from '@mui/material/CircularProgress'

const CircularProgressDeterminate = styled(CircularProgress)<CircularProgressProps>(({ theme }) => ({
  color: 'var(--mui-palette-customColors-trackBg)'
}))

const CircularProgressIndeterminate = styled(CircularProgress)<CircularProgressProps>(({ theme }) => ({
  left: 0,
  position: 'absolute',
  animationDuration: '550ms',
  color: theme.palette.mode === 'light' ? '#1a90ff' : '#308fe8'
}))

const ProgressCircularCustomization = () => {
  return (
    <div className='relative'>
      <CircularProgressDeterminate variant='determinate' size={50} thickness={5} value={100} />
      <CircularProgressIndeterminate variant='indeterminate' disableShrink size={50} thickness={5} />
    </div>
  )
}

export default ProgressCircularCustomization
Controlled and Uncontrolled

Manage value prop with the help of a state for controlled circular progress.

Uncontrolled Progress

Controlled Progress

// React Imports
import { useEffect, useState } from 'react'

// MUI Imports
import Grid from '@mui/material/Grid'
import Typography from '@mui/material/Typography'
import CircularProgress from '@mui/material/CircularProgress'

const ProgressCircularControlledUncontrolled = () => {
  // States
  const [progress, setProgress] = useState<number>(0)

  useEffect(() => {
    const timer = setInterval(() => {
      setProgress(prevProgress => (prevProgress >= 100 ? 0 : prevProgress + 10))
    }, 800)

    return () => {
      clearInterval(timer)
    }
  }, [])

  return (
    <Grid container spacing={6}>
      <Grid item xs={12} md={6}>
        <Typography className='font-medium mbe-4' color='text.primary'>
          Uncontrolled Progress
        </Typography>
        <div className='flex gap-4'>
          <CircularProgress variant='determinate' value={25} />
          <CircularProgress variant='determinate' value={50} />
          <CircularProgress variant='determinate' value={75} />
          <CircularProgress variant='determinate' value={100} />
        </div>
      </Grid>
      <Grid item xs={12} md={6}>
        <Typography className='font-medium mbe-4' color='text.primary'>
          Controlled Progress
        </Typography>
        <CircularProgress variant='determinate' value={progress} />
      </Grid>
    </Grid>
  )
}

export default ProgressCircularControlledUncontrolled
Linear
Indeterminate

Use LinearProgress component for simple linear progress.

// MUI Imports
import LinearProgress from '@mui/material/LinearProgress'

const ProgressLinearIndeterminate = () => {
  return <LinearProgress />
}

export default ProgressLinearIndeterminate
Buffer

Use variant='buffer' and valueBuffer props with the help of a state for linear progress with buffer.

// React Imports
import { useEffect, useRef, useState } from 'react'

// MUI Imports
import LinearProgress from '@mui/material/LinearProgress'

const ProgressLinearBuffer = () => {
  // States
  const [buffer, setBuffer] = useState<number>(10)
  const [progress, setProgress] = useState<number>(0)

  // eslint-disable-next-line
  const progressRef = useRef(() => {})

  useEffect(() => {
    progressRef.current = () => {
      if (progress > 100) {
        setProgress(0)
        setBuffer(10)
      } else {
        const diff = Math.random() * 10
        const diff2 = Math.random() * 10

        setProgress(progress + diff)
        setBuffer(progress + diff + diff2)
      }
    }
  })

  useEffect(() => {
    const timer = setInterval(() => {
      progressRef.current()
    }, 500)

    return () => {
      clearInterval(timer)
    }
  }, [])

  return <LinearProgress variant='buffer' value={progress} valueBuffer={buffer} />
}

export default ProgressLinearBuffer
Colors

Use color prop for different colored linear progress.

// MUI Imports
import LinearProgress from '@mui/material/LinearProgress'

const ProgressLinearColors = () => {
  return (
    <div className='w-full flex gap-4 flex-col'>
      <LinearProgress color='secondary' />
      <LinearProgress color='success' />
      <LinearProgress color='error' />
      <LinearProgress color='warning' />
      <LinearProgress color='info' />
    </div>
  )
}

export default ProgressLinearColors
Controlled and Uncontrolled

Manage value prop with the help of a state for controlled linear progress.

Uncontrolled Progress

Controlled Progress

// React Imports
import { useEffect, useState } from 'react'

// MUI Imports
import Typography from '@mui/material/Typography'
import LinearProgress from '@mui/material/LinearProgress'

const ProgressLinearControlledUncontrolled = () => {
  // States
  const [progress, setProgress] = useState<number>(0)

  useEffect(() => {
    const timer = setInterval(() => {
      setProgress(oldProgress => {
        if (oldProgress === 100) {
          return 0
        }
        const diff = Math.random() * 10

        return Math.min(oldProgress + diff, 100)
      })
    }, 500)

    return () => {
      clearInterval(timer)
    }
  }, [])

  return (
    <>
      <div className='mbe-4'>
        <Typography className='font-medium mbe-1.5' color='text.primary'>
          Uncontrolled Progress
        </Typography>
        <LinearProgress variant='determinate' value={40} />
      </div>
      <>
        <Typography className='font-medium mbe-1.5' color='text.primary'>
          Controlled Progress
        </Typography>
        <LinearProgress variant='determinate' value={progress} />
      </>
    </>
  )
}

export default ProgressLinearControlledUncontrolled
With Label

Use variant='determinate' and value props with the help of a state for linear progress with label.

10%

// React Imports
import { useEffect, useState } from 'react'

// MUI Imports
import Typography from '@mui/material/Typography'
import LinearProgress from '@mui/material/LinearProgress'
import type { LinearProgressProps } from '@mui/material/LinearProgress'

const LinearProgressWithLabel = (props: LinearProgressProps & { value: number }) => {
  return (
    <div className='flex items-center gap-3'>
      <div className='w-full'>
        <LinearProgress variant='determinate' {...props} />
      </div>
      <Typography variant='body2'>{`${Math.round(props.value)}%`}</Typography>
    </div>
  )
}

const ProgressLinearWithLabel = () => {
  // States
  const [progress, setProgress] = useState<number>(10)

  useEffect(() => {
    const timer = setInterval(() => {
      setProgress(prevProgress => (prevProgress >= 100 ? 10 : prevProgress + 10))
    }, 800)

    return () => {
      clearInterval(timer)
    }
  }, [])

  return <LinearProgressWithLabel value={progress} />
}

export default ProgressLinearWithLabel
Customization

Use styled hook to customize your Linear progress.

// MUI Imports
import { styled } from '@mui/material/styles'
import LinearProgress, { linearProgressClasses } from '@mui/material/LinearProgress'

const BorderLinearProgress = styled(LinearProgress)(({ theme }) => ({
  height: 10,
  borderRadius: 5,
  [`&.${linearProgressClasses.colorPrimary}`]: {
    backgroundColor: 'var(--mui-palette-customColors-trackBg)'
  },
  [`& .${linearProgressClasses.bar}`]: {
    borderRadius: 5,
    backgroundColor: theme.palette.mode === 'light' ? '#1a90ff' : '#308fe8'
  }
}))

const ProgressLinearCustomization = () => {
  return <BorderLinearProgress variant='determinate' value={70} />
}

export default ProgressLinearCustomization