https://github.com/phamfoo/react-native-animated-spinkit

A collection of loading indicators for React Native
https://github.com/phamfoo/react-native-animated-spinkit

animations loading react-native spinkit spinners

Last synced: 2 days ago
JSON representation

A collection of loading indicators for React Native

• Host: GitHub
• URL: https://github.com/phamfoo/react-native-animated-spinkit
• Owner: phamfoo
• License: mit
• Created: 2019-11-25T11:22:52.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2021-06-26T14:46:40.000Z (over 3 years ago)
• Last Synced: 2024-10-02T16:11:17.588Z (about 1 month ago)
• Topics: animations, loading, react-native, spinkit, spinners
• Language: TypeScript
• Homepage:
• Size: 2.37 MB
• Stars: 290
• Watchers: 6
• Forks: 20
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# React Native Animated SpinKit

[![Stable Release](https://img.shields.io/npm/v/react-native-animated-spinkit.svg)](https://npm.im/react-native-animated-spinkit) [![license](https://badgen.now.sh/badge/license/MIT)](./LICENSE)

A pure JavaScript port of [SpinKit](https://github.com/tobiasahlin/SpinKit) for React Native.

![](demo.gif)

## Why Another Port?

The previous port of [SpinKit](https://github.com/tobiasahlin/SpinKit) for React Native ([react-native-spinkit](https://github.com/maxs15/react-native-spinkit)) is a native module so it requires extra native dependencies and can't be used in [Expo](https://expo.io) projects without ejecting.

This library is a pure JavaScript port of SpinKit implemented with the [Animated](https://facebook.github.io/react-native/docs/animated) API, which means you can use it in any React Native project and the spinners will look identical on Android and iOS.

## Installation

```sh

yarn add react-native-animated-spinkit

```

or

```sh

npm install react-native-animated-spinkit

```

## Usage

```js

import { Plane } from 'react-native-animated-spinkit'

function App() {

  return (

    

      

    

  )

}

```

## Props

Inherits [View Props](https://facebook.github.io/react-native/docs/view#props)

### size

> `number` | defaults to `48`

Width and height of the spinner.

### color

> `string` | defaults to `#000`

Color of the spinner.

### animating

> `boolean` | defaults to `true`

Whether to show the indicator or hide it.

### hidesWhenStopped

> `boolean` | defaults to `true`

Whether the indicator should hide when not animating.

## Spinners

All the spinners from [SpinKit](https://github.com/tobiasahlin/SpinKit) have been ported.

- ``

- ``

- ``

- ``

- ``

- ``

- ``

- ``

- ``

- ``

- ``

- ``

## Example

To run the example project, follow these steps:

- Clone the repo

- Run these commands

```sh

yarn

cd example

yarn && yarn start

```