You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 4-6.RSVP
Socket
Book a DemoInstallSign in
Socket

react-spinners-css

Package Overview
Dependencies
Maintainers
0
Versions
25
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-spinners-css

[![bit components](https://img.shields.io/badge/bit_components-14-6e3991)](https://bit.cloud/joshk/react-spinners-css) [![npm version](https://badge.fury.io/js/react-spinners-css.svg)](https://www.npmjs.com/package/react-spinners-css) [![GitHub stars](htt

2.0.2
latest
Source
npmnpm
Version published
Weekly downloads
432
-17.56%
Maintainers
0
Weekly downloads
 
Created
Source

React Spinners CSS Loaders (Vue, Angular)

bit components npm version GitHub stars GitHub license Twitter Follow

Amazing collection of React spinners components with pure css.
The React spinners are based on loading.io and from all over the web.
If you want to add your own spinner, please follow the contributing guidelines.

  • 💅 No extra CSS imports
  • ✂️ Zero dependencies
  • 📦 Spinners can be installing separately

Live Demo

Browse components and explore their props with Bit.
Install specific react spinner component with npm, yarn or bit without having to install the whole project.
Install components and live demo

🚀 List of Spinners

Each component accepts a color prop, and few accepts also size prop.
The default color prop is #7f58af.
Component that accepts size prop have a default size in pixel.

Spinnercolor: stringsize: numberclassName: stringstyle: object
<Circle/>#7f58af64""{}
<Default/>#7f58af80""{}
<Ellipsis/>#7f58af80""{}
<DualRing/>#7f58af80""{}
<Facebook/>#7f58af80""{}
<Grid/>#7f58af80""{}
<Heart/>#7f58af80""{}
<Hourglass/>#7f58af32""{}
<Ring/>#7f58af80""{}
<Ripple/>#7f58af80""{}
<Roller/>#7f58af-""{}
<Spinner/>#7f58af-""{}
<Orbitals/>#7f58af-""{}
<Ouroboro/>#7f58af-""{}

📦 Installation

Using npm to install react-spinners-css:

$ npm i --save react-spinners-css

Play and install react spinners with Bit

Install specific react spinner component with bit, npm or yarn without having to install the whole project.
Using bit to play with live demo, and try the spinners before install.

set npm regisetry config(one time action):

npm config set @joshk:registry="https://node-registry.bit.cloud"

and use your favorite package manager:

npm i @joshk/react-spinners-css.heart
yarn add @joshk/react-spinners-css.heart
bit install @joshk/react-spinners-css.heart

💻 Usage Examples

//using npm or yarn
import { Circle, Heart } from 'react-spinners-css';
//using bit
import { Facebook } from '@joshk/react-spinners-css.facebook';
...
render() {
   return(
     <div>
       <Circle /> //default color is #7f58af
       <Circle color="red" />
       <Circle color="#be97e8" size={200} /> //size prop is number in pixel
       <Heart />
       <Facebook /> //default color is #7f58af
       <Facebook color="red" />
     </div>
   )
}

👾 Development

You can see the components locally by cloning this repo and doing the following steps:

  • Install Bit.
  • Run the project using bit start.

🙌 Contributing

  • Pull requests and ⭐ stars are always welcome.
  • For bugs and feature requests, please create an issue.
  • If you want to add your own spinner, please follow the contributing guidelines.
  • If you want to update or add features to some spinner, please follow the contributing guidelines.

👏🏻 Support my open-source

If you like to support my open-source contributions please star and share this project. 💫

📄 License

MIT

Keywords

react-spinners

FAQs

Package last updated on 05 Jan 2025

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts