load-awesome-react-components

1.1.2 • Public • Published

load-awesome-react-components

React Components for Load Awesome

React Components for the fantastic Load Awesome CSS library

import React, {Component} from 'react';
import LoadAwesomeComponents from 'load-awesome-react-components';
 
class ComponentWithAwesomeLoader extends Component {
  render() {
    return (
      <LoadAwesomeComponents.Ball.Atom />
    )
  }
}

Components are broken up into categories:

Ball

import { Ball } from 'load-awesome-react-components';
 
const {
  Atom,
  Beat,
  Circus,
  ClimbingDot,
  ClipRotate,
  ClipRotateMultiple,
  ClipRotatePulse,
  EightBits,
  ElasticDots,
  Fall,
  Fusion,
  GridBeat,
  GridPulse,
  NewtonCradle,
  Pulse,
  PulseRise,
  PulseSync,
  Rotate,
  RunningDots,
  Scale,
  ScaleMultiple,
  ScalePulse,
  ScaleRipple,
  ScaleRippleMultiple,
  SpinClockwise,
  SpinClockwiseFade,
  SpinClockwiseFadeRotating,
  SpinFade,
  SpinFadeRotating,
  Spin,
  SpinRotate,
  SquareSpin,
  SquareClockwiseSpin,
  TrianglePath,
  ZigZag,
  ZigZagDeflect,
} = Ball
 
class BallLoaders extends Component {
  render() {
    return (
      <div>
        <Atom />
        <Beat />
        <Circus />
        <ClimbingDot />
        <ClipRotate />
        <ClipRotateMultiple />
        <ClipRotatePulse />
        <EightBits />
        <ElasticDots />
        <Fall />
        <Fusion />
        <GridBeat />
        <GridPulse />
        <NewtonCradle />
        <Pulse />
        <PulseRise />
        <PulseSync />
        <Rotate />
        <RunningDots />
        <Scale />
        <ScaleMultiple />
        <ScalePulse />
        <ScaleRipple />
        <ScaleRippleMultiple />
        <SpinClockwise />
        <SpinClockwiseFade />
        <SpinClockwiseFadeRotating />
        <SpinFade />
        <SpinFadeRotating />
        <Spin />
        <SpinRotate />
        <SquareSpin />
        <SquareClockwiseSpin />
        <TrianglePath />
        <ZigZag />
        <ZigZagDeflect />
      </div>
    )
  }
}

Line

import { Line } from 'load-awesome-react-components';
 
const {
  Scale,
  ScaleParty,
  ScalePulseOut,
  ScalePulseOutRapid,
  SpinClockwiseFade,
  SpinClockwiseFadeRotating,
  SpinFade,
  SpinFadeRotating,
} = Line
 
class LineLoaders extends Component {
  render() {
    return (
      <div>
        <Scale />
        <ScaleParty />
        <ScalePulseOut />
        <ScalePulseOutRapid />
        <SpinClockwiseFade />
        <SpinClockwiseFadeRotating />
        <SpinFade />
        <SpinFadeRotating />
      </div>
    )
  }
}

Misc

import { Misc } from 'load-awesome-react-components';
 
const {
  Cog,
  CubeTransition,
  Fire,
  Pacman,
  Timer,
} = Misc
 
class MiscLoaders extends Component {
  render() {
    return (
      <div>
        <Cog />
        <CubeTransition />
        <Fire />
        <Pacman />
        <Timer />
      </div>
    )
  }
}

Square

import { Square } from 'load-awesome-react-components';
 
const {
  JellyBox,
  Loader,
  Spin,
} = Square
 
class SquareLoaders extends Component {
  render() {
    return (
      <div>
        <JellyBox />
        <Loader />
        <Spin />
      </div>
    )
  }
}

Triangle

import { Triangle } from 'load-awesome-react-components';
 
const {
  SkewSpin,
} = Triangle
 
class TriangleLoaders extends Component {
  render() {
    return (
      <div>
        <SkewSpin />
      </div>
    )
  }
}

Load Awesome

An awesome collection of — Pure CSS — Loaders and Spinners

A full suite of 53 animations for websites, created and maintained by Daniel Cardoso.

License

The MIT License (MIT)

Copyright (c) 2015 DanielCardoso.net Copyright (c) 2018 Sampson Crowley

Dependents (0)

Package Sidebar

Install

npm i load-awesome-react-components

Weekly Downloads

1

Version

1.1.2

License

MIT

Unpacked Size

1.62 MB

Total Files

128

Last publish

Collaborators

  • sampsoncrowley