React loading indicators

For such type of feedback, designers use progress bars, loading indicators, preloaders or spinners. They explain to users when something is happening or loading and ideally reduce mental waiting time.

In a perfect world, loading animation should: Be shown to the user as least as possible, give time estimation, explain why the user needs to wait, make the waiting process less frustrating.

react-content-loader

SVG-Powered component to easily create placeholder loadings like Facebook’s cards loading, less than 2kB and 0 dependencies for web version, and can be used with React Native.

halogen

A collection of loading spinners with React.js

react-spinkit

A collection of loading indicators animated with CSS for React, ported all the spinner animations from Spinkit.

react-loaders

Lightweight wrapper around Loaders.css (Delightful and performance-focused pure css loading animations)

react-redux-loading-bar

A React component that provides Loading Bar (aka Progress Bar) for long running tasks.

react-spinners-css

Amazing collection of React spinners components with pure css, no extra CSS imports, zero dependencies, and spinners can be installing separately.

react-spinners

A collection of loading spinners with React.js based on Halogen.