Loader

Usage

This props inherits all the Div properties from HTML

import React from 'react'
import {
  Div,
  CircularProgress,
  BorderLinearProgress,
} from 'qdm-component-library'

function App() {
  const [progresslow, setProgresslow] = React.useState(0)

  React.useEffect(() => {
    const timer = setInterval(() => {
      setProgresslow((oldProgress) => {
        if (oldProgress === 100) {
          return 1
        }
        const diff = Math.random() * 5
        return Math.min(oldProgress + diff, 100)
      })
    }, 500)

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

  const [progress, setProgress] = React.useState(0)

  React.useEffect(() => {
    const timer = setInterval(() => {
      setProgress((oldProgress) => {
        if (oldProgress === 100) {
          return 1
        }
        const diff = Math.random() * 10
        return Math.min(oldProgress + diff, 100)
      })
    }, 500)

    return () => {
      clearInterval(timer)
    }
  }, [])
  return (
    <Div>
      <CircularProgress />
      <CircularProgress color="secondary" />
      <BorderLinearProgress />
      <BorderLinearProgress color="secondary" />
      <BorderLinearProgress value={progress} />
      <BorderLinearProgress value={progresslow} color="secondary" />
    </Div>
  )
}
export default App

Reference

Props

className

props for providing classname to CircularProgress,BorderLinearProgress component string

id

props for providing id to CircularProgress,BorderLinearProgress component string

name

props for providing name to CircularProgress,BorderLinearProgress component string

children

props for providing children for CircularProgress,BorderLinearProgress Component React Node

inLineStyles

props give addition props to the CircularProgress,BorderLinearProgress Component type Object

color

props for providing color to the CircularProgress,BorderLinearProgress Component "inherit" | "primary" | "secondary"

variant

props for providing variant to the CircularProgress,BorderLinearProgress Component 'determinate' | 'indeterminate' | 'static'

value

props for providing value to the CircularProgress,BorderLinearProgress Component any