All Projects → kdastan → react-native-modal-loader

kdastan / react-native-modal-loader

Licence: MIT license
Customizable animated modal progress hud for react apps.

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to react-native-modal-loader

Whirl
CSS loading animations with minimal effort!
Stars: ✭ 774 (+2050%)
Mutual labels:  progress, loader
Lcprogresshud
一个超简单的活动指示器。适配横屏。
Stars: ✭ 100 (+177.78%)
Mutual labels:  progress, hud
Awloader
AWLoader is a UI Component that allows you to integrate loader that fits your needs within your app.
Stars: ✭ 11 (-69.44%)
Mutual labels:  progress, loader
Ftindicator
A light wight UI package contains local notification, progress HUD, toast, with blur effect, elegant API and themes support.
Stars: ✭ 292 (+711.11%)
Mutual labels:  progress, hud
Apesuperhud
A simple way to display a HUD with a message or progress information in your application.
Stars: ✭ 156 (+333.33%)
Mutual labels:  progress, hud
Loading Bar
Flexible, light weighted and super fast Progress Bar Library
Stars: ✭ 300 (+733.33%)
Mutual labels:  progress, loader
Funnyloader
Loading indicator for android with over 200 random messages
Stars: ✭ 77 (+113.89%)
Mutual labels:  progress, loader
BSLoader
It's to show loading animations
Stars: ✭ 13 (-63.89%)
Mutual labels:  loader, hud
Vue Wait
Complex Loader and Progress Management for Vue/Vuex and Nuxt Applications
Stars: ✭ 1,869 (+5091.67%)
Mutual labels:  progress, loader
Vue Loaders
Vue + loaders.css
Stars: ✭ 127 (+252.78%)
Mutual labels:  progress, loader
react-awesome-loaders
🚀 High quality, super responsive and completely customisable Loading Animations to insert into your website with single line of code.
Stars: ✭ 146 (+305.56%)
Mutual labels:  progress, loader
Spinners React
Lightweight SVG/CSS spinners for React
Stars: ✭ 254 (+605.56%)
Mutual labels:  progress, loader
ZVProgressHUD
ZVProgressHUD is a pure-swift and wieldy HUD.
Stars: ✭ 30 (-16.67%)
Mutual labels:  progress, hud
Waitme
jquery plugin for easy creating loading css3/images animations
Stars: ✭ 302 (+738.89%)
Mutual labels:  progress, loader
Ybhud
A simple Hud with DGActivityIndicatorView
Stars: ✭ 81 (+125%)
Mutual labels:  loader, hud
Nyan Progress
Nyan cat progress bar in Node, why not?
Stars: ✭ 34 (-5.56%)
Mutual labels:  progress, loader
Swiftloader
A simple and beautiful activity indicator written in Swift
Stars: ✭ 116 (+222.22%)
Mutual labels:  progress, loader
Svprogresshud
A clean and lightweight progress HUD for your iOS and tvOS app.
Stars: ✭ 12,339 (+34175%)
Mutual labels:  progress, hud
spinners-angular
Lightweight SVG/CSS spinners for Angular
Stars: ✭ 21 (-41.67%)
Mutual labels:  progress, loader
HalfModal
HalfModal mimics the behavior of the drawer of Apple's shortcut application. It is realized using a combination of UIViewPropertyAnimator.
Stars: ✭ 24 (-33.33%)
Mutual labels:  modal

react-native-modal-loader

Platform npm version npm downloads License

A progress hud for react apps

Installation

Install the module from npm with npm install react-native-modal-loader --save.

Demo

Usage

Import module using import Loader from 'react-native-modal-loader';, then place component at the top of your view container.

Properties

Prop Default isRequired Type Description
loading false true bool Whether to show the loader or hide it
color grey false color Color of the spinner
size small false 'small' or 'large' Size of the spinner
opacity 0.4 false number Background opacity value between 0 and 1
title "" false string Description for loader

Example

import React, { Component } from "react";
import { StyleSheet, Button, Text, View } from "react-native";
import Loader from "react-native-modal-loader";

export default class App extends Component {
  state = {
    isLoading: false
  };

  showLoader = () => {
    this.setState({ isLoading: true });
  };

  render() {
    return (
      <View style={styles.container}>
        <Loader loading={this.state.isLoading} color="#ff66be" />
        <Button title="Press me!" onPress={this.showLoader} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#F5FCFF"
  }
});

Future goals

  • New animation style

License

MIT License. © Kumar Dastan

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].