Loading components for your everyday use

Usage no npm install needed!

<script type="module">
  import onaioLoaders from 'https://cdn.skypack.dev/@onaio/loaders';



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


yarn add @onaio/loaders

Ripple Loader

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


import Ripple from '@onaio/loaders';

<Ripple />;


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


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} />;