Skip to content
Get packs

react-content-loader

A React component that draws grey placeholder shapes while content loads.

GitHub Download v7.1.2
Stars
14k
Forks
422
Licence
MIT
Language
TypeScript
Last update
10 months ago
Type
Library

What it is

react-content-loader is a React component library that shows animated placeholder shapes, often called skeleton screens, while a page or card is still loading. It draws the placeholders as SVG, so you can use ready-made presets or define your own shapes with rectangles and circles. It also has a React Native version with the same API.

  • Show a Facebook-style card placeholder while a feed loads
  • Build a custom skeleton layout matching your page with rect and circle shapes
  • Turn off animation with the animate prop for users or tests that need a static placeholder
  • Adjust colors, speed, and RTL direction to match your design

Great for

  • React developers who want loading placeholders for cards, lists, or profiles
  • Teams that want a small dependency for skeleton screens on the web
  • React Native developers who need placeholder loaders using react-native-svg
  • Developers who want to build custom placeholder layouts with the online tool

Not ideal for

  • Projects not using React, since the package is a React component
  • Apps that need heavy custom animation beyond the built-in shimmer options, as the README only documents speed, colors, and opacity controls
  • Projects that cannot add the react-native-svg dependency on React Native, since the README says it is needed for custom shapes
Step-by-step guide: how to use react-content-loaderInstall, first run, examples, tips and FAQs
react-content-loader alternativesreact-content-loader vs react-loadablereact-content-loader vs SkeletonView

How to get it

  1. 1

    Install with a package manager

    Install with npm

    npm i react-content-loader --save

    Install with yarn

    yarn add react-content-loader
  2. 2

    Run it

    • Install the package with npm or yarn
    • Import ContentLoader and, optionally, a preset such as Facebook from 'react-content-loader'
    • Render <ContentLoader /> in your component to see a placeholder
    • For a custom shape, pass a viewBox and add rect or circle elements inside ContentLoader
  3. 3

    Get the most out of it

    • Use the online create-content-loader tool to design a custom layout visually
    • Set speed, backgroundColor, and foregroundColor to match your app's theme
    • Use the baseUrl prop when your document head includes a base tag, as described in the README
    • Use the React Native import from 'react-content-loader/native' for mobile apps
    • Use the title prop or set it to an empty string to control the accessible title

Downloads

Source code (.zip)master branch · straight from GitHubRelease v7.1.2Release notes and sourceOfficial website & docsskeletonreact.com

Strengths

  • The README says it is lightweight, under 2kB with zero dependencies for the web version
  • Presets such as Facebook-style loaders make a quick start possible
  • Works on both React DOM and React Native with the same import style

Trade-offs

  • React Native custom mode needs react-native-svg or the built-in Rect and Circle exports, which adds setup
  • Several options, such as gradientRatio and style, are listed as React DOM only
  • The README is truncated in this source, so some details may be missing

How it compares

ProjectStarsTypeLevelUpdatedBest for
react-content-loader (this)14kLibrarybeginner10 months agoReact developers who want loading placeholders for cards, lists, or profiles
SkeletonView12.9kLibrarybeginner5 months agoiOS developers building apps that load data from the network
react-native-elements25.9kLibraryintermediate6 months agoReact Native developers who want ready-made UI components
react-native-web22.2kLibraryintermediate4 days agoDevelopers who already use React Native and want the same components on the web
NativeBase20.4kLibraryintermediate9 months agoTeams maintaining an existing app already built on NativeBase
react-native-maps16kLibraryintermediate18 days agoReact Native developers adding a map screen to an iOS or Android app

Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.