Skip to main content

Animated Loader

Custom styled loaders for many kind of use.

Height and width#

Set the custom sizing by height and width props. height is required to show the loader.

<>
<AnimatedLoader loaderStyle={{width:"100%", height:"20px"}} />
</>

Color#

Set the custom color by color prop.

<>
<AnimatedLoader loaderStyle={{color:"#673FBD", height:"20px", width:"100%"}} />
</>

Round#

Use round prop to set "border-radius: 50%".

<>
<AnimatedLoader loaderStyle={{round:true, height:"100px", width:"100px"}} />
</>

Box#

Make the loader to show as box by isBox prop.

<>
<AnimatedLoader loaderStyle={{isBox:true, height:"20px", width:"100%"}} />
</>

With image#

Make the loader to show with image by withImage prop.

<>
<AnimatedLoader loaderStyle={{withImage:true, height:"20px", width:"100%"}} />
</>

API#

import AnimatedLoader from "erxes-ui/lib/components/AnimatedLoader";

* required prop

NameTypeDefualtDescription
loaderStyleheightstringSet the custom height
widthstringSet the custom width
colorstringSet the custom color
roundbooleanSet border-radius: 50%
marginstringGive margin (from top and left)
marginRightstringGive margin (from right)
isBoxbooleanShow the loader as box
withImagebooleanShow the loader with image
Last updated on by enkhzule