Ive created an application that uses Airtable as a database. Ive used a spinner to take the place of a dull blank page which would otherwise be presented to the user in the time that it takes for the requested data to arrive and for the page to get rendered accordingly.

I could have used an existing react spinners library, but instead, I decided to use this chance to learn how to build my own spinners and my own React component library. So, in this post, Ill show you my library, and an example of how to use a spinner.

React Spinners Library

So, without further ado, heres my react spinners library (GitHub, Bit). Its based on loading.io CSS loaders. Ive added the option to send color and size as props of the component so that its easier to customize the spinners. Ive exported the spinners (twelve in total) to bit.dev so you may easily view and tweak them in Bits live playground, and install them as packages with NPM or Yarn (or get their source code using Bit import).

$ npm i --save react-spinners-css

For example, this is the circle loader and the component can receive color and size props:

and the code import a very simple CSS code, exactly the same from loading.io CSS loader:

How to use Loader animation in your React.js application?

So, you have a component that sends a request and stores the received data in an array inside your state object. The obvious thing to do is check if the array is empty and if so, display the spinner.

For this example, I used a Facebook spinner with a very simple page that waiting 5 seconds until to show a list of cars.

Its very simple to use and allows you to show a nice animation loader until the data is loaded.

Also, you can use a custom color in any spinner, just send a color inside the color property, like this:

<Facebook color="red" /><Facebook color="#cecece" />

Or be crazy and use a random color with my random color generator component.

<Facebook color={getRandomColor()} />

You can see the result with random color in this live demo facebook react spinner.

If you want to see more react spinners examples, check out my react spinners components collection in bit.dev.

For any issue or missing features, please open an issue on GitHub and Ill do my best.

And of course, if you like it, star it!

$ npm i --save react-spinners-css

And follow me on Twitter to get features updates.