react-bootstrap-spinner

1.0.5Β β€’Β PublicΒ β€’Β Published

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.

NPM NPM JavaScript Style Guide

Showcase

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

React Keyboard Light Mode

✨ 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").

🀝 Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Thanks ❀️

License

MIT Β© License

Author

Made with ❀️ by Ajay Marathe

Package Sidebar

Install

npm i react-bootstrap-spinner

Weekly Downloads

85

Version

1.0.5

License

MIT

Unpacked Size

125 kB

Total Files

20

Last publish

Collaborators

  • ajay1098