React-bootstrap-spinner NPM

React Bootstrap Spinner

🎉 React-Bootstrap-Spinner is a customizable and flexible spinner component for React applications. It allows you to create Bootstrap-style spinners using both predefined Bootstrap colors and custom color codes, with support for both border and grow animations.

Showcase

Here’s how the react-bootstrap-spinner component looks:

✨ Features

🌀 Border and Grow animations
🎨 Custom color support (hex codes, RGB, etc.)
🖌️ Bootstrap color variants (primary, success, danger, etc.)
⚡ Easy integration into React projects
🔧 Adjustable spinner size

🚀 Install

To install the package, run the following command:

npm install react-bootstrap-spinner

📖 Usage

Here's an example of how to use the spinner component in your React project:

import React from 'react';
import Spinner from 'react-bootstrap-spinner';

const App = () => (
  <div>
    <h1>Loading...</h1>
    <Spinner animation="border" color="primary" size="4rem" />
    <Spinner animation="grow" color="#ff6347" size="2rem" />  {/* Custom color */}
  </div>
);

export default App;

Props

Prop	Type	Default	Description
`animation`	string	`"border"`	The type of spinner animation (`"border"` or `"grow"`).
`color`	string	`"primary"`	The color of the spinner. Can be a Bootstrap color or a custom hex code.
`size`	string	`"3rem"`	The size of the spinner, defined in CSS units (e.g., `"2rem"`, `"50px"`).