React-React css loaders: :o: A collection of pure CSS React loading components

React CSS Loaders

Travis CI npm version Coverage Status

A collection of pure CSS React loading components. Based on Luke Haas css-loaders project.

Contents

Getting Start

npm install react-css-loaders --save

Usage

  import { BarLoader } from 'react-css-loaders';
  ...
  <BarLoader />
  ...

Components

BarLoader

Usage

<BarLoader />

Properties
Name Type Default
color PropTypes.string #000
duration PropTypes.number 1
size PropTypes.number 11

BubbleLoader

Usage

<BubbleLoader />

Properties
Name Type Default
color PropTypes.string #000
duration PropTypes.number 1.8
size PropTypes.number 10

BubbleSpinLoader

Usage

<BubbleSpinLoader />

Properties
Name Type Default
color PropTypes.string #000
duration PropTypes.number 1.3
size PropTypes.number 20

CometSpinLoader

Usage

<CometSpinLoader />

Properties
Name Type Default
color PropTypes.string #000
duration PropTypes.number 1.7
size PropTypes.number 90

CylinderSpinLoader

Usage

<CylinderSpinLoader />

Properties
Name Type Default
color PropTypes.string #000
duration PropTypes.number 1.1
size PropTypes.number 25

ResizeSpinLoader

Usage

<ResizeSpinLoader />

Properties
Name Type Default
background PropTypes.string #000
color PropTypes.string #000
duration PropTypes.number 2
size PropTypes.number 11

RotateSpinLoader

Usage

<RotateSpinLoader />

Properties
Name Type Default
color PropTypes.string #000
duration PropTypes.number 1.1
size PropTypes.number 10

SpinLoader

Usage

<SpinLoader />

Properties
Name Type Default
background PropTypes.string #fff
color PropTypes.string #000
duration PropTypes.number 1.4
size PropTypes.number 10

Authors

Lucas Bassetti
Lucas Bassetti

See also the list of contributors who participated in this project.

How to Contribute

Please check the contributing guide

License

MIT · Lucas Bassetti

Comments

  • Correct build
    Correct build

    Oct 16, 2017

    libraries should be built with babel w/o webpack

    • webpack build broke tree-shaking in projects

    • webpack build broke sourcemaps

    • webpack team does not propose to use webpack for libraries

      (*)

    • I have weird error with production build: TypeError: e is not a function

    use please: https://github.com/gerhardsletten/react-css-loaders

    also additional umd build may be useful for somebody

    Reply
  • Doesn't work
    Doesn't work

    Mar 15, 2020

    I was looking for a good spinner library and this seemed the best but on the latest version of React etc it gives me image when I try to do import { BarLoader } from 'react-css-loaders'

    Reply
  • Added typescript declarations.
    Added typescript declarations.

    Jan 10, 2020

                                                                                                                                                                                                           
    Reply
  • Can't have <BarLoader width={" class="image-fit lazy">
    Can't have

    Nov 27, 2017

    Bar appears to be hard coded to use 'px' units.

    Reply
  • Can't change color of BubbleLoader
    Can't change color of BubbleLoader

    Jul 26, 2017

    Hi,

    You missed the ';' in Bubble.jsx at the end of the line 19 color: ${props => props.color}

    thanks.

    Reply
  • Move styled-components to the peer dependencies
    Move styled-components to the peer dependencies

    Jul 20, 2017

    According to https://github.com/styled-components/styled-components/issues/992, styled-components modules shouldn't be duplicated. Components will lose their styles if someone will be using react-css-loaders and manually depends on styled-components.

    Reply