@onaio/loaders
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.3 • Public • Published

    Loaders

    This package provides a number of React loading elements that you can use to show that something on your page is... loading.

    Installation

    yarn add @onaio/loaders

    Ripple Loader

    The Ripple Loader displays a nice ripple effect via pure CSS.

    Usage

    import Ripple from '@onaio/loaders';
    
    <Ripple />;

    Customization

    The Ripple loader takes a number of props that can be used to customize it:

    • borderColor: the border color
    • borderStyle: the border style
    • borderWidth: the border width
    • height: the height
    • minHeight: the minimum height
    • width: the width

    Code example

    import Ripple from '@onaio/loaders'
    
    const props = {
      borderColor: '#FF22EF',
      borderStyle: 'dotted',
      borderWidth: '4px',
    }
    
    <Ripple {...props} />

    Facebook, Grid, DualRing, Ring, Ellipsis, CircleRotate

    Attribution: Loading.io

    These Loaders display a nice loading effects via pure CSS. using styled-components

    Customization

    These loader can be parametrized by animation speed, size and color through the below props:

    • color: color of component
    • scaleSizeBy: a number to scale the size relative to the default
    • scaleSpeedBy: a number to scale the speed relative to the default

    Code example

    import { CircleRotate } from '@onaio/loaders';
    
    <CircleRotate {...props} />;

    Keywords

    none

    Install

    npm i @onaio/loaders

    DownloadsWeekly Downloads

    10

    Version

    0.0.3

    License

    Apache-2.0

    Unpacked Size

    48.6 kB

    Total Files

    23

    Last publish

    Collaborators

    • onaio