Loading Animation

A simple npm package to display animated loading in react js . The package includes various animation types that can be customized with text.

example code:

import React, { useState, useEffect } from 'react';
import { LoadingAnimation, CustomTextAnimation } from 'skloading-animated';

const AnimationDemo = () => {
    const [loadingText, setLoadingText] = useState('Loading...');
    const [customText, setCustomText] = useState('Processing...');
    const [animationStarted, setAnimationStarted] = useState(false);
    const [customAnimationStarted, setCustomAnimationStarted] = useState(false);

    useEffect(() => {
        let loadingAnimation = new LoadingAnimation('Loading', { animationType: 'dots', interval: 500 });
        if (animationStarted) {
            loadingAnimation.start(setLoadingText);
            return () => {
                loadingAnimation.stop(setLoadingText);
            };
        }
    }, [animationStarted]);

    useEffect(() => {
        let customTextAnimation = new CustomTextAnimation('Processing', 300);
        if (customAnimationStarted) {
            customTextAnimation.start(setCustomText);
            return () => {
                customTextAnimation.stop(setCustomText);
            };
        }
    }, [customAnimationStarted]);

    return (
        <div style={{ textAlign: 'center', marginTop: '50px' }}>
            {/* Loading Animation Example */}
            <div>
                <p>{loadingText}</p>
                {!animationStarted ? (
                    <button onClick={() => setAnimationStarted(true)}>Start Loading Animation</button>
                ) : (
                    <button onClick={() => setAnimationStarted(false)}>Stop Loading Animation</button>
                )}
            </div>

            {/* Custom Text Animation Example */}
            <div style={{ marginTop: '30px' }}>
                <p>{customText}</p>
                {!customAnimationStarted ? (
                    <button onClick={() => setCustomAnimationStarted(true)}>Start Custom Text Animation</button>
                ) : (
                    <button onClick={() => setCustomAnimationStarted(false)}>Stop Custom Text Animation</button>
                )}
            </div>
        </div>
    );
};

export default AnimationDemo;



## Features

- Different loading animations to choose from:
  - Basic Spinner
  - Rainbow Loader
  - Square in a Circle Loader
  - Dump Truck Loader
  - Dots Loader
  - Bouncing Ball Loader
  - Rotating Arrows Loader
  - Clock Animation
- Custom text can be displayed alongside animations.

## Installation

To install the `loading-animation` package, run the following command in your terminal:


```bash
npm install skloading-animated