Fancy-loading-animation NPM

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

fancy-loading-animation-demo

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	`{}`