React loading indicators

Oct 28, 2020 • ☕️ 1 min read

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.

Related Posts

Ant Design of React

An enterprise-class UI design language and React UI library

React resources

Top resources for you to learn and find awesome stuff related to React web framework

JavaScript Module Loaders

Module loaders are libraries that can handle loading modules using the different formats for further processing or executing

React development tools

Notable tools to make your developer experience with React seemlessly