image

React loading indicators

Notable loaders, spinners, progress bars to let user know something is loading

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

image

github.com

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

image

github.com

A collection of loading spinners with React.js

react-spinkit

image

github.com

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

react-loaders

image

github.com

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

react-redux-loading-bar

image

github.com

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

react-spinners-css

image

github.com

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

react-spinners

image

github.com

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