https://github.com/venushadilshan/react-spinner-animated

Animated, Customizable Spinner/Loader Library for React
https://github.com/venushadilshan/react-spinner-animated

component loader loading react react-loader-spinner react-spinner reactjs spinner

Last synced: 2 months ago
JSON representation

Animated, Customizable Spinner/Loader Library for React

• Host: GitHub
• URL: https://github.com/venushadilshan/react-spinner-animated
• Owner: venushadilshan
• Created: 2021-12-12T05:15:02.000Z (about 3 years ago)
• Default Branch: master
• Last Pushed: 2022-03-23T05:37:31.000Z (almost 3 years ago)
• Last Synced: 2024-10-28T22:03:21.471Z (2 months ago)
• Topics: component, loader, loading, react, react-loader-spinner, react-spinner, reactjs, spinner
• Language: JavaScript
• Homepage: https://react-spinner-animated-demo.vercel.app/
• Size: 643 KB
• Stars: 24
• Watchers: 4
• Forks: 8
• Open Issues: 2
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# react-spinner-animated

> Loader/Spinner Library for React 

[![NPM](https://img.shields.io/npm/v/react-spinner.svg)](https://www.npmjs.com/package/react-spinner) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)




## Customize Your Spinner/Loader

  

Create your spinner/Loader 




## Install

```bash

npm i react-spinner-animated

```

## Variations





 - ``

 - ``

 - ``

 - ``

 - ``

 - ``

 - ``

## Usage

You must import both the Loader/Spinner component and index.css 


i.e - `import 'react-spinner-animated/dist/index.css'`

```jsx

import { BarLoader,DoubleBubble, SlidingPebbles } 

from 'react-spinner-animated';

import 'react-spinner-animated/dist/index.css'

class MyComponent extends Component {

  render() {

    return 

  }

}

```

## Props

Prop

Usage

Default

Type

text 

 Custom text for display with the loader/spinner

 " "

 Strings

bgColor 

 Custom text for display with the loader/spinner

 White

 Any color name or HEX color code

width 

 width of the container 

 -

 pixels (150px)

height 

 height of the container 

 -

 pixels (150px)

center 

 Place the component fixed at the center of the page 

 true

 Boolean (true, false)






### See you again with more spinners

## License

MIT © [venushadilshan](https://github.com/venushadilshan)