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).
JoshK2
/
react-spinners-css
Amazing collection of React spinners components with pure css
React Spinners CSS Loaders (Vue, Angular)
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
Live Demo
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 |
"" |
{} |
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" />
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 I’ll do my best.
And of course, if you like it, star it!
JoshK2
/
react-spinners-css
Amazing collection of React spinners components with pure css
React Spinners CSS Loaders (Vue, Angular)
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
Live Demo
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 |
"" |
{} |
And follow me on Twitter to get features updates.
Top comments (5)
"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 :)
Anyone else compulsively waiting for the banner image to load? :P
I was about to start playing with react, I will be using this.
Can you share more info about how you exported the spinners to bit.dev?
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