Skip to main content

Loading

Basic Usage​

In JSX
import { CLoading } from '@casual-ui/react'

function Demo() {
  return <CLoading />
}
Loading...
<CLoading />
Fold/Expand Code

Sizes​

Directly use CSS font-size to set loading size

Loading...
<SpaceItems>

  {['24px', '100px', '10vw'].map(size => (

    <CLoading style={{ fontSize: size }} key={size} />

  ))}

</SpaceItems>
Fold/Expand Code

Custom Color​

Directly use CSS color attribute to set colors.

Loading...
<SpaceItems>

  <CLoading style={{ color: 'rgb(0, 184, 118)', fontSize: '3em' }} />

  <CLoading style={{ color: 'orange', fontSize: '3em' }} />

  <CLoading style={{ color: '#FF0080', fontSize: '3em' }} />

</SpaceItems>
Fold/Expand Code
TIP

You can also set the parent dom's color and font-size

Loading...
<span style={{ color: 'blue', fontSize: '3em' }}>

  <CLoading />

</span>
Fold/Expand Code

Thickness​

Loading...
<div style={{ fontSize: '120px' }}>

  <SpaceItems>

    <CLoading color="#FF0080" thickness={2} />

    <CLoading color="#FF0080" thickness={5} />

    <CLoading color="#FF0080" thickness={10} />

  </SpaceItems>

</div>
Fold/Expand Code

Different Loading Animations​

Loading...
function Demo() {

  const colors = [

    'rgb(255, 0, 128)',

    'rgb(156, 39, 176)',

    'rgb(255, 152, 0)',

    'rgb(33, 150, 243)',

    'rgb(244, 67, 54)',

    'rgb(0, 188, 212)',

    'rgb(255, 0, 128)',

    'rgb(63, 81, 181)',

    'blue',

    'rgb(3, 169, 244)',

    'rgb(0, 188, 212)',

    'rgb(0, 150, 136)',

    'rgb(76, 175, 80)',

    'rgb(139, 195, 74)',

    'rgb(25, 118, 210)',

    'rgb(244, 67, 54)',

    'rgb(33, 150, 243)',

    'rgb(156, 39, 176)',

    'rgb(255, 87, 34)',

    'rgb(38, 166, 154)',

    'rgb(121, 85, 72)',

    'rgb(158, 158, 158)',

    'rgb(96, 125, 139)',

  ]



  const loadings = [

    CLoading,

    CLoadingAudio,

    CLoadingDot,

    CLoadingBar,

    CLoadingSpinBox,

    CLoadingClock,

    CLoadingComment,

    CLoadingCube,

    CLoadingDots,

    CLoadingGear,

    CLoadingHeart,

    CLoadingHourglass,

    CLoadingInfinity,

    CLoadingLattice,

    CLoadingOrbit,

    CLoadingOval,

    CLoadingPie,

    CLoadingPuff,

    CLoadingRings,

    CLoadingTail,

    CLoadingWifi,

    CLoadingBars,

    CLoadingCircleBars,

  ]



  return (

    <SpaceItems>

      {loadings.map((LoadingInstance, i) => (

        <div style={{ color: colors[i], fontSize: '3em' }} key={i}>

          <LoadingInstance />

        </div>

      ))}

    </SpaceItems>

  )

}
Fold/Expand Code

Props​

Name (*for required)DescriptionTypeDefault Value
No Data