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'; { 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 { 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 { 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 { return <div> <Cog /> <CubeTransition /> <Fire /> <Pacman /> <Timer /> </div> }
Square
import Square from 'load-awesome-react-components'; const JellyBox Loader Spin = Square { return <div> <JellyBox /> <Loader /> <Spin /> </div> }
Triangle
import Triangle from 'load-awesome-react-components'; const SkewSpin = Triangle { 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