React-loading-collection

A collection of fancy loading components and more. Demo

Getting Started

The aim of this project is creating and collecting great loading components which can be customised and used easily.

Prerequisites

If you want to use icons in the loading components. Please place this code in your index.html

<script defer src="https://use.fontawesome.com/releases/v5.0.2/js/all.js"></script>

Installing

Simply install it with npm or yarn

npm

npm i react-loading-collection

yarn

yarn add react-loading-collection

Usage

import { Loading, Square, Axinan, Bubble, Porthole } from 'react-loading-collection';

/*
* the Loading component is the background of the loading component.
* you can pass in a few props:
* 1. show(default: false): used to toggle loading component.
* 2. style: used to override the background styles
*
* Loading.Component is the component that you wan to display in the center of the page. You can pass in the component as props.
* Loading.Icon is the icon that you want to display in the middle of your loading component. Font awesome icons is supported.
* Loading.Label is the label that you want to display. You can put it above or below your Loading.Component.
* The Loading.Icon and Loading.Label are optional.
* All the component styles can be override by passing in the style props.
*/

//Axinan: special loading icon for Axinan
<Loading onClick={() => this.setState({axinan: false})} show={this.state.axinan} style={{background: "rgba(0, 0, 0, 0.6)"}}>
  <Loading.Component component={Axinan}>
  </Loading.Component>
  <Loading.Label style={{'letterSpacing': '8px', 'paddingLeft': '8px'}} label="AXINAN" />
</Loading>

//Squere
<Loading onClick={() => this.setState({square: false})} show={this.state.square} style={{fontFamily: 'Bungee'}}>
  <Loading.Component component={Square}>
    <Loading.Icon icon="fa-download" />
  </Loading.Component>
  <Loading.Label style={{'letterSpacing': '4px', 'paddingLeft': '8px'}} label="Square" />
</Loading>

//Bubble
<Loading onClick={() => this.setState({bubble: false})} show={this.state.bubble}>
  <Loading.Component component={Bubble}>
    {/*the Icon and Label component are optional*/}
    <Loading.Icon icon="fa-comments" />
  </Loading.Component>
  <Loading.Label style={{'letterSpacing': '8px', 'paddingLeft': '8px'}} label="Bubble" />
</Loading>

//Porthole
<Loading onClick={() => this.setState({porthole: false})} show={this.state.porthole}>
  <Loading.Component component={Porthole}>
    <Loading.Icon icon="fa-arrow-up" />
  </Loading.Component>
</Loading>

Acknowledgments

Modified 2 loading components which are created by Canva.