Accessible Loading Indicators For React

Description:

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