https://github.com/ajaymarathe/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.
https://github.com/ajaymarathe/react-bootstrap-spinner

bootstrap-spinner loaders react-bootstrap-spinner react-loader spinners

Last synced: 5 months ago
JSON representation

🎉 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.

• Host: GitHub
• URL: https://github.com/ajaymarathe/react-bootstrap-spinner
• Owner: ajaymarathe
• License: mit
• Created: 2019-10-18T12:21:40.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2024-10-06T09:24:29.000Z (about 1 year ago)
• Last Synced: 2025-05-08T07:52:07.362Z (5 months ago)
• Topics: bootstrap-spinner, loaders, react-bootstrap-spinner, react-loader, spinners
• Language: JavaScript
• Homepage:
• Size: 2.47 MB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# 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](https://img.shields.io/npm/v/react-bootstrap-spinner.svg)](https://www.npmjs.com/package/react-bootstrap-spinner) [![NPM](https://img.shields.io/npm/dt/react-bootstrap-spinner.svg)](https://www.npmjs.com/package/react-bootstrap-spinner) 

[![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Showcase

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

![React Keyboard Light Mode](https://raw.githubusercontent.com/ajaymarathe/react-bootstrap-spinner/refs/heads/master/public/images/react-spinner.png)

## ✨ 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:

```js

npm install react-bootstrap-spinner

```

## 📖 Usage

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

```bash

import React from 'react';

import Spinner from 'react-bootstrap-spinner';

const App = () => (

  


    
Loading...

    

      {/* Custom color */}

  

);


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](https://github.com/ajaymarathe/react-bootstrap-spinner/blob/master/LICENSE)

## Author

Made with ❤️ by [Ajay Marathe](https://github.com/ajaymarathe)