Make beautiful, animated loading skeletons that automatically adapt to your app.

Overview

react-loading-skeleton

Make beautiful, animated loading skeletons that automatically adapt to your app.

Gif of skeleton in action

Basic usage

Install by npm/yarn with react-loading-skeleton.

import Skeleton from 'react-loading-skeleton';

<Skeleton/> // Simple, single-line loading skeleton
<Skeleton count={5}/> // Five-line loading skeleton

Principles

Adapts to the styles you have defined

The component is designed to be used directly in your components, in place of content while it's still loading. Unlike other libraries, rather than meticulously crafting a skeleton screen to match the font-size, line-height or margins your content takes on, use a component to have it automatically fill the correct dimensions.

For example:

class Blogpost extends Component {
  render() {
    return (
      <div style={{ fontSize: 20, lineHeight: 2 }}>
        <h1>{this.props.title || <Skeleton />}</h1>
        {this.props.body || <Skeleton count={10} />}
      </div>
    );
  }
}

...will produce the correctly-sized skeletons for the heading and body sections without any further configuration of the component.

This ensures the loading state remains up-to-date with any changes to your layout or typography.

Don't make dedicated skeleton screens

Instead, make components with built-in skeleton states.

In addition to keeping the styling in-sync, here are some other reasons to do this:

  1. Components represent all possible states it can be in - loading included.
  2. It allows for more flexible loading patterns - in the Blogpost example, it's possible to have the title load first, and then the body, while having both pieces of content show loading skeletons at the right time.

Theming

Using a component, you can easily change the colors of all skeleton components below it in the React hierarchy:

import Skeleton, { SkeletonTheme } from "react-loading-skeleton";

<SkeletonTheme color="#202020" highlightColor="#444">
  <p>
    <Skeleton count={3} />
  </p>
</SkeletonTheme>;

Duration

<Skeleton duration={2} />

duration: Number, defaults to 1.2

Duration is how long it takes do one cycle of the skeleton animation.

Width

width: Number | String | null, defaults to null

<Skeleton width={100} />

Width of the skeleton. Useful when the skeleton is inside an inline element with no width of its own.

Height

Height: Number | String | null, defaults to null

<Skeleton height={100} />

Height of the skeleton. Useful when you don't want to adapt the skeleton to a text element but for instance a card. Also needed for the prop circle (see below).

Circle

Circle: Boolean | false, defaults to false

<Skeleton circle={true} height={50} width={50} />

Prop for making the skeleton look like a circle, for when you are creating a user card with a profile picture for instance.

Issues
  • fix: Skeleton theme polluting DOM

    fix: Skeleton theme polluting DOM

    It's not desired for the theme to dictate any DOM changes. Switching to use Global allows us to drop the physical DOM element.

    opened by baleeds 17
  • Doesn't work with SSR due to insistence on using window object

    Doesn't work with SSR due to insistence on using window object

    Unfortunately, in SSR contexts the server side renderer will crash due to it using the window object which is not available in the Node context.

    opened by CoenWarmer 16
  • Does not display if width in % and child of Flex or Grid

    Does not display if width in % and child of Flex or Grid

    I want to use percent widths in a responsive layout, but if the Skeleton component is within a Flex or Grid parent then you must supply a px width. Is there any plan to add a classname to the default 'span' wrapper? This would at least allow me to add a custom style object in this situation.

    opened by johnruane 9
  • Support RTL animation

    Support RTL animation

    First of all I'd like to thank you for this great package,

    Right now there is no support for RTL skeleton animation, is there a way to add a direction (direction: string, Defaults to ltr) or rtl (rtl: boolean Defaults to false) prop on SkeletonTheme component to deal with that?

    Happy to help on that!

    opened by saadaouad 7
  • Allow specifying width

    Allow specifying width

    I found after using skeletons that I nearly always want to specify a width. To get that I have to wrap each <Skeleton /> with an extra component so I can set the width:

    <span style={{ width: '100px' }}><Skeleton /></span>
    

    I made a wrapper to make this easer:

    <Span width="100px"><Skeleton /></Span>
    

    However I would prefer just setting the (optional) width directly on the skeleton:

    <Skeleton width="100px" />
    

    I'm willing to submit a pull request if you're interested in incorporating it.

    opened by ravinggenius 6
  • Skeleton is not showing in production

    Skeleton is not showing in production

    Hi. I find that all of a sudden I don't see any skeletons in production. It all works fine on my local. Anyone else experienced such a thing?

    opened by chidimo 5
  • Switch to emotion 11 beta

    Switch to emotion 11 beta

    ⚠️ This is not to be merged in master branch, but I couldn't PR this into a new branch.

    • Switch to emotion 11 beta
    • Replace @emotion/babel-preset-css-prop to jsx pragma (simpler in small projects). I did this in the first because @emotion/babel-preset-css-prop is not published under 11.0.0-next.13 and is incompatible with @emotion/react for now. (this is a temporary bug)
    • Fully tested with Jest and visually with storybook
    opened by cyrilchapon 5
  • Adding margin props?

    Adding margin props?

    Any thoughts on adding margin props? It would be helpful for fixing issues like this

    screenshot 2018-09-18 09 13 11 screenshot 2018-09-18 09 13 54
    opened by simpson 5
  • Circulair prop

    Circulair prop

    Based on open issue #9 I've added a small feature to make the skeleton circulair. This will make it easy to compose for example user cards with profile pictures. To make this work I also added a height prop to manage the height of the skeleton. This default prop will be null so this won't affect skeletons that are used by adapting to text.

    The reason why I added these props is because this package now is only supporting skeleton loading for texts. Imho, most of the time it's not text you would like to cover with skeleton loading.

    I've added stories to the tests. Please make sure to also update the npm package when this PR get's accepted since I would like to use this package heavily.

    opened by glenngijsberts 5
  • perf: use composite animation

    perf: use composite animation

    Skeleton is animated using css tranform instead of background repositioning. Previously, changing background position caused the renderer to repaint the gradient on each animation keyframe.

    This implementation uses translateX to animate the skeleton effect. Using css transform doesn't trigger repaint.

    Before

    https://user-images.githubusercontent.com/7829141/136707209-22fb8843-700f-475f-9e77-4cf91f23de02.mov

    After

    https://user-images.githubusercontent.com/7829141/136707245-df707021-9aa4-4ace-8af4-f26ae23f4a51.mov

    opened by aboodz 0
  • Version 3 Roadmap

    Version 3 Roadmap

    @dvtng has given me the approval to work on a version 3 of react-loading-skeleton 😁

    Progress will be tracked in the GitHub project.

    Please open an issue if you have any feature requests!

    Here are the major changes that are planned:

    • [Breaking] Drop Emotion dependency, add CSS file that must be imported (#80)
    • [Breaking] Reimplement SkeletonTheme using React context (#101)
    • [Breaking] Officially drop Internet Explorer support (I have no idea if the current version works in IE)
    • [Breaking] Convert to TypeScript (#59)
    • [Breaking] Publish code as ES2015.
    • [Breaking] Require React >= 16.8.0
    • Publish an ES module in addition to a CommonJS module
    • Add live demo (#44)
    • Allow setting animation direction to right-to-left (#78)
    • Fix all open issues
    • Merge/close all open PRs
    opened by srmagura 0
  • Add live demo

    Add live demo

    This package is awesome, but not have a live demo page :|

    Today, any React Package need a demo page, use some React Lib, like React Live

    Or deploy a simple HTML and Css page, like there: https://lakscastro.github.io/menu-hamburger

    The most important is show your lib working

    Thank you, and I hope it takes into account the suggestion :)

    opened by LaksCastro 1
Owner
David Tang
David Tang
3D animated react button component with progress bar.

3D animated react button component with progress bar.

MD. Ariful Alam 68 Oct 5, 2021
A collection of loading spinner components for react

React Spinners A collection of loading spinners with React.js based on Halogen. This package is bootstraped using react-npm-boilerplate Demo Demo Page

David Hu 2k Oct 12, 2021
⚪ SVG-Powered component to easily create skeleton loadings.

SVG-Powered component to easily create placeholder loadings (like Facebook's cards loading). Features ⚙️ Customizable: Feel free to change the colors,

Danilo Woznica 11.6k Oct 13, 2021
:cyclone: Simple react.js component for an inline progress indicator

react-progress-button Simple React component for a circular Progress Button. Demo Install npm install react-progress-button --save Example Controlled

Mathieu Dutour 517 Sep 11, 2021
A collection of loading indicators animated with CSS for React

react-spinkit A collection of loading indicators animated with CSS for React Currently I've ported all the spinner animations from Spinkit. If you hav

Kyle Mathews 1.4k Oct 2, 2021
react-loader - React component that displays a spinner via spin.js until your component is loaded.

react-loader react-loader provides your React.js component a simple mechanism for rendering a loading spinner (via spin.js) while data is loading, suc

Cognizant Studio 529 Sep 16, 2021
Creates a download handler function and gives progress information

Creates a download handler function and gives progress information

Olavo Parno 57 Sep 15, 2021
Easy way to block the user from interacting with your UI.

react-block-ui Easy way to block the user from interacting with your UI. About This library contains easy to use components to prevent the user from i

Availity 271 Sep 13, 2021
Amazing collection of React spinners components with pure css

React Spinners CSS Loaders (Vue, Angular) Amazing collection of React spinners components with pure css. The React spinners are based on loading.io an

Josh Kuttler 274 Sep 24, 2021
❄️ The ultimate Line Progress Bar UI for React - Supports 🌸 Natural color gradients & ☃️ Coherent border rounding

Frogress ❄️ The ultimate Line Progress Bar UI for React @frogress/line ?? Installation # Install peer depedencies yarn add react react-dom styled-comp

Junho Yeo 12 Sep 6, 2021