Accessible Loading Indicators For React

A React component library that allows you to use SVG-Loaders as components in your React app and built with accessibility in mind.

Install & Import:

# Yarn
$ yarn add @agney/react-loading

# NPM
$ npm i @agney/react-loading --save

import { useLoading, loaderName } from '@agney/react-loading';

Basic Usage:

function Content() {
  const { containerProps, indicatorEl } = useLoading({
    loading: true,
    indicator: <Audio width="50" />,
  });
  return (
    {/* Accessibility props injected to container */}
    <section {...containerProps}>
      {indicatorEl} {/* renders only while loading */}
    </section>
  );
}

Preview:

Download Details:

Author: agneym

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/agneym/react-loading

License: MIT