DEV Community

Cover image for How I Created My Own React Spinners Library
Josh Kuttler
Josh Kuttler

Posted on • Updated on • Originally published at Medium

How I Created My Own React Spinners Library

I’ve created an application that uses Airtable as a database. I’ve 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, I’ll show you my library, and an example of how to use a spinner.

React Spinners Library

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

GitHub logo JoshK2 / react-spinners-css

Amazing collection of React spinners components with pure css

React Spinners CSS Loaders (Vue, Angular)

CircleCI bit components npm version GitHub stars code style: prettier GitHub license Twitter Follow

Amazing collection of React spinners components with pure css.
The React spinners are based on loading.io and from all over the web.
If you want to add your own spinner, please follow the contributing guidelines.

  • 💅No extra CSS imports
  • ✂️Zero dependencies
  • 📦Spinners can be installing separately

Browse components and explore their props with Bit.
Install specific react spinner component with npm, yarn or bit without having to install the whole project.
Install components and live demo

🚀 List of Spinners - PropTypes and Default Props

Each component accepts a color prop, and few accepts also size prop.
The default color prop is #7f58af.
Component that accepts size prop have a default size in pixel.

Spinner color: string size: number className: string style: object
<Circle/> #7f58af 64 "" {}
<Default/> #7f58af 80 "" {}
<Ellipsis/> #7f58af 80

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.

It’s 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" />
Enter fullscreen mode Exit fullscreen mode

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

<Facebook color={getRandomColor()} />
Enter fullscreen mode Exit fullscreen mode

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 I’ll do my best.

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

GitHub logo JoshK2 / react-spinners-css

Amazing collection of React spinners components with pure css

React Spinners CSS Loaders (Vue, Angular)

CircleCI bit components npm version GitHub stars code style: prettier GitHub license Twitter Follow

Amazing collection of React spinners components with pure css.
The React spinners are based on loading.io and from all over the web.
If you want to add your own spinner, please follow the contributing guidelines.

  • 💅No extra CSS imports
  • ✂️Zero dependencies
  • 📦Spinners can be installing separately

Browse components and explore their props with Bit.
Install specific react spinner component with npm, yarn or bit without having to install the whole project.
Install components and live demo

🚀 List of Spinners - PropTypes and Default Props

Each component accepts a color prop, and few accepts also size prop.
The default color prop is #7f58af.
Component that accepts size prop have a default size in pixel.

Spinner color: string size: number className: string style: object
<Circle/> #7f58af 64 "" {}
<Default/> #7f58af 80 "" {}
<Ellipsis/> #7f58af 80

And follow me on Twitter to get features updates.

Top comments (5)

Collapse
 
msm8 profile image
John Brooks

"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." - Great attitude :)

Collapse
 
codemouse92 profile image
Jason C. McDonald

Anyone else compulsively waiting for the banner image to load? :P

Collapse
 
fultonbrowne profile image
Fulton Browne

I was about to start playing with react, I will be using this.

Collapse
 
davebloom1 profile image
davebloom1

Can you share more info about how you exported the spinners to bit.dev?

Collapse
 
joshk2 profile image
Josh Kuttler

Hey, I'll write a specific post for this, it will be a tutorial about how to share your components to bit.dev.

But for now you can check out this post:
blog.bitsrc.io/how-to-easily-share...
and the docs site for more info:
docs.bit.dev/docs/bit-react-tutorial