Node Permanently Moved

    cssonly-loaders-react

    0.0.8 • Public • Published

    React component for the CSS only loader project

    React wrapper for the CSS Only loaders project.

    CSS Only Loaders

    How to use

    Download the module with npm (or yarn)

    yarn add cssonly-loaders-react
    

    The module come with two component, <Loader/> and <FullLoader/>, The Loader is also a default export.

    to use only the loader, component, without any wrapper or anything, use the sample code:

        import Loader from "cssonly-loaders-react";
     
        function App(props){
            return (
                <Loader/>
            )
        }

    Every prop has default, so,it will still render without any props, It should render the simple-circle loader with default colors and attributes.

    If you want to use a loader, that fills in the container and blocks everything(most probable use IMO) you need to use the FullLoader component.

    To use the full loader, make sure the loader container has position set to anothing other than static. because this component relies on position absolute.

    Here's a barebone sample code:

        import Loader from "cssonly-loaders-react";
     
        function App(props){
            return (
                <FullLoader/>
            )
        }

    It should render the simple circle loader with all the default color and attributes with a semi-transparent, black rgba(0,0,0,0.4) backdrop.

    You can change the loader attributes with props

    List of props:

    Prop value type default available for description
    type String simple-circle ALL Type of loader available. See table of loaders below
    size Number 70 ALL Loader size in pixels
    color String #27ae60 ALL The color for the loader
    secondaryColor String #eeeeee ALL The secondary color for the loader
    backgroundColor String rgba(0,0,0,0.4) <FullLoader/> The backdrop color for the full size loader. use a rgba color for better effect.
    line Number 3 ALL Line width for the loaders that features line this unit is in pixels. No need to include px. just use a number
    duration Number 2 ALL Animation duration in seconds
    visible Boolean true ALL Determine if the loader will be visible or not. Takes the extra pain away for implementing any show-hide logic.

    Available Loaders

    All the loaders from the main project is available in the component:

    Loader Name
    simple-circle
    rotating-plane
    awesome-spin
    blasting-circle
    box-rotation
    clock
    color-pulse-ball
    double-circle
    hour-glass
    quantum-spinner
    recursive-circle
    block-spin
    cascading-bars

    Any new loader added to the project will be added to the component as well.

    Install

    npm i cssonly-loaders-react

    DownloadsWeekly Downloads

    12

    Version

    0.0.8

    License

    MIT

    Unpacked Size

    207 kB

    Total Files

    7

    Last publish

    Collaborators

    • theanam