If you’re looking to add some flair to your React application, spinners are a fantastic way to keep users engaged during loading times. In this guide, we’ll show you how to install and use Spinners React, a collection of nine lightweight, TypeScript-aware spinners built as React components. Let’s dive in!

Getting Started

To get started with Spinners React, you need to install the package. You can do this using npm:

$ npm install spinners-react

Alternatively, if you want to add it directly to an HTML page, follow the instructions under the UMD bundle usage section below.

Usage

To use a spinner, you simply need to import it into your component:

import SpinnerCircular from 'spinners-react';

Then, you can simply add the spinner component in your render method:

<SpinnerCircular />

Hiding Spinners

If you want to hide the spinner at any point, you can set the prop enabled=false:

<SpinnerCircular enabled={false} />

Available Spinner Components

Here are the spinner types you can use:

• SpinnerCircular
• SpinnerCircularFixed
• SpinnerCircularSplit
• SpinnerRound
• SpinnerRoundOutlined
• SpinnerRoundFilled
• SpinnerDotted
• SpinnerInfinity
• SpinnerDiamond

You can check out the visual representation of these components here.

Customizing Spinner Properties

Spinners React allows customization of various properties. Here are a few:

• size: Adjusts the size in pixels or as a CSS string (default: 50).
• thickness: Sets line width as a percentage of the default (default: 100).
• color: Change the spinner color using a valid CSS string (default: #38ad48).
• speed: Adjust the animation speed as a percentage of the default (default: 100).

Server Side Rendering

While Spinners React supports server side rendering (SSR), note that animations will only begin after the page fully loads. To ensure the animations load correctly, you might want to manually include the CSS in your bundle:

@import '~spinners-react/lib/SpinnerCircular.css';

For all spinners:

@import '~spinners-react/lib/index.css';

Minimizing Bundle Size

To keep your bundle size slim, only import the spinners you’re going to use:

import SpinnerCircular from 'spinners-react';

Troubleshooting

• If you encounter issues with spinners not showing up, ensure you have included the necessary CSS files.
• Always make sure that your spinner component is imported correctly in your code.
• If the styles do not appear as expected, check your CSS import paths.
• For more complex issues, you can report a bug on the GitHub issues page.

For more insights, updates, or to collaborate on AI development projects, stay connected with fxis.ai.

Conclusion

With Spinners React, adding stylish loading indicators to your application can be done effortlessly. Whether you’re building a larger app or just need a few spinning icons, you’ll find these components quite handy.

At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.

Additional Resources

For those using other frameworks, you might want to check out Spinners Angular.