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

    Install

    npm i load-awesome-react-components

    DownloadsWeekly Downloads

    6

    Version

    1.1.2

    License

    MIT

    Unpacked Size

    1.62 MB

    Total Files

    128

    Last publish

    Collaborators

    • sampsoncrowley