https://github.com/geekbrother/springloader

Gradient spring animated loading activity indicator component for React Native in pure Reanimated and SVG
https://github.com/geekbrother/springloader

activity expo indicator loader react-native reactnative reanimated2 svg

Last synced: 2 months ago
JSON representation

Gradient spring animated loading activity indicator component for React Native in pure Reanimated and SVG

• Host: GitHub
• URL: https://github.com/geekbrother/springloader
• Owner: geekbrother
• License: mit
• Created: 2023-04-08T13:53:28.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2023-04-08T17:24:18.000Z (about 3 years ago)
• Last Synced: 2025-03-30T15:14:28.980Z (over 1 year ago)
• Topics: activity, expo, indicator, loader, react-native, reactnative, reanimated2, svg
• Language: TypeScript
• Homepage:
• Size: 540 KB
• Stars: 3
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# 🌈 SpringLoader [![npm version](https://badge.fury.io/js/spring-loader.svg)](https://badge.fury.io/js/spring-loader)

Gradient spring animated loading activity indicator component for React Native. 

The animation is created in pure [reanimated2](https://docs.swmansion.com/react-native-reanimated/) and [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG).

It's lightweight, made in TypeScript, and can be used in the Splash screen (unlike Lottie and Rove animations).

## Showcase

![alt Showcase](https://github.com/geekbrother/SpringLoader/blob/main/assets/showcase.gif)

## What's included:

- Spring animation;

- Wave animation;

- Array of the rgb colors for the linear gradient as a prop;

- Animation of poping and hiding when the loading state changes.

## How to use

The package uses TypeScript and provides types when importing. 

Add package to the React Native project by `npm i spring-loader`. 

Import the `SpringLoader` component `import { AnimationTypes, SpringLoader } from 'spring-loader';`.

Find a full usage example in [examples/expo-app/App.tsx](https://github.com/geekbrother/SpringLoader/blob/main/examples/expo-app/App.tsx).

## Example app

There is an `Expo` example app with the showcase in the `examples/expo-app` folder.

## Todo

Implement a [Skia](https://github.com/Shopify/react-native-skia) version