Fancy-Loading-Animation

The package contains some fancy looking loading animation components to use in react project. There are many usefull props to easily customize the component to meet any need.

Demo

DEMO

Installation

Install my component with npm

  npm i fancy-loading-animation

Screenshots

Usage/Examples

Import my component and use where you want to show the loading animation.

import React from 'react'
import FancyLoadingAnimation from 'fancy-loading-animation'
import 'fancy-loading-animation/dist/index.css'

const App = () => {
  return (
    <FancyLoadingAnimation
      loadingAnimationVarient='bee'
      loadingAnimationDelay={0.3}
      loadingCharacterDirection='right'
      loadingTextStyle={{ color: 'orange' }}
      
    />
  )
}
export default App

API Reference

These are the props to customize the component.

| Props | Type | Description | Default | | :--------: | :-------: | :------------------------- | :------: | | loadingAnimationVarient | string | It will choose the varient of the loading animation among [bug, bee, blue-bat, ghost, green-monster, hairy-monster, paper-bird, puppy and robot-ball] | bug | | loadingCharacterDirection | string | It will choose the direction of the loading animation among [left and right] | left | | loadingAnimationDelay | number | It will slow/fast the loading animation among | 1 | | loadingSize | number | It will increase/decrease the whole animation size | 1 | | loadingSize | number | It will increase/decrease the whole animation size | 1 | | loadingContainerVisibility | boolean | Control the visibility of the container of the animation | true | | loadingContainerWidth | number | Control the width of the background container of the animation | 280 | | loadingContainerHeight | number | Control the height of the background container of the animation | 280 | | loadingContainerBorder | string | Modify the border of the background container of the animation [css property of border] | 1px solid rgb(0, 0, 0, 0.3) | | loadingContainerColor | color | Modify the color of the background container of the animation [css property of background-color] | #d8d8d8 | | loadingContainerShadow | string | Modify the shadow property of the background container of the animation [css property of box-shadow] | inset 15px 15px 10px #999 | | loadingText | string | Sets the loading text | Loading | | loadingDotShow | boolean | Select whether to show dots after loading text | true |

Advance

If one wants to dive deeper and modify all the CSS property of all the animation elements [Container, Animation Character, Loading Text] then below props will help

| Props | Type | Description | Default | | :--------: | :-------: | :------------------------- | :------: | | loadingContainerStyle | CSS style Object | Value pass through this props will set the style property of the container of the loading animation| {} | | loadingAnimationStyle | CSS style Object | Value pass through this props will set the style property of the loading animation character| {} | | loadingTextStyle | CSS style Object | Value pass through this props will set the style property of the loading text| {} |

Acknowledgements

I would like to show my gratitude towards below free sources/ assets/ tutorials to help me making this component.

• Frankslaboratory
• Free assets

License

MIT © OmorFarukRakib

Support

For support, please mail me at [email protected].

Links