Loader

The Loader component is a customizable React component that displays a spinning loader animation. It's built using styled-components and TypeScript for better styling control and type safety.

Features

• Customizable size
• Customizable color
• Smooth spinning animation
• TypeScript support for type safety

Installation

To use the Loader component in your React application, install it via npm:

npm install @droid-tech/react-ts-loader

Note: This component requires styled-components as a peer dependency. If you haven't already installed it, you can do so with:

npm install styled-components

Usage

To use the Loader component, simply import it and add it to your React component:

import Loader from "@droid-tech/react-ts-loader";

<Loader />

Props

The Loader component accepts the following optional props:

| Prop | Type | Default | Description | |---------|----------|---------|--------------------------------------| | size | number | 48 | The size of the loader in pixels | | color | string | "#000"| The color of the loader |

Examples

Default loader:

<Loader />

Custom size and color:

<Loader size={64} color="#007bff" />

Customization

The Loader component uses styled-components, which allows for easy customization and theming. You can override the default styles by wrapping the Loader component with a styled-components theme provider or by creating a new styled component based on the Loader.

How it works

The Loader component creates a circular spinning animation using CSS animations. It renders a circular border with one side transparent, creating the illusion of a spinning loader.

Conclusion

The Loader component provides a simple and customizable way to add loading indicators to your React application. With its size and color customization options, it can easily be styled to match your design requirements.