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 [e-mail].

Links