Gathering detailed insights and metrics for react-loading-skeleton
Gathering detailed insights and metrics for react-loading-skeleton
Create skeleton screens that automatically adapt to your app!
Installations
npm install react-loading-skeletonDeveloper Guide
BETA
Typescript
Yes
Module System
ESM
Node Version
22.7.0
NPM Version
10.8.2
Releases
12
Languages
4
TypeScript
JavaScript
CSS
Shell
TypeScript (89.05%)
JavaScript (10.43%)
CSS (0.36%)
Shell (0.16%)
Developer
dvtng
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
GitHub Statistics
MIT License
4,142 Stars
249 Commits
159 Forks
21 Watchers
11 Branches
22 Contributors
Updated on Jul 10, 2025
Maintainers
1
Package Meta Information
Latest Version
3.5.0
Package Id
react-loading-skeleton@3.5.0
Unpacked Size
26.09 kB
Size
7.45 kB
File Count
11
NPM Version
10.8.2
Node Version
22.7.0
Published on
Sep 21, 2024
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Peer Dependencies
1
Dev Dependencies
42
@rollup/plugin-typescript@storybook/addon-essentials@storybook/addon-interactions@storybook/addon-links@storybook/blocks@storybook/react@storybook/react-vite@swc/core@testing-library/jest-dom@testing-library/react@types/react@types/react-dom@types/testing-library__jest-dom@typescript-eslint/eslint-plugin@typescript-eslint/parser@vitejs/plugin-react-swceslinteslint-config-airbnbeslint-config-airbnb-typescripteslint-config-prettiereslint-plugin-importeslint-plugin-jsx-a11yeslint-plugin-reacteslint-plugin-react-hookseslint-plugin-testing-libraryhuskyjsdomlint-stagedprettierprettier-plugin-packagejsonprop-typesreactreact-domrimrafrolluprollup-plugin-copystorybooktslibtypescriptvitevite-plugin-checkervitest
React Loading Skeleton
Make beautiful, animated loading skeletons that automatically adapt to your app.
Open on CodeSandbox
Learn about the changes in version 3, or view the v2 documentation.
Basic Usage
Install via one of:
1yarn add react-loading-skeleton 2npm install react-loading-skeleton
1import Skeleton from 'react-loading-skeleton' 2import 'react-loading-skeleton/dist/skeleton.css' 3 4<Skeleton /> // Simple, single-line loading skeleton 5<Skeleton count={5} /> // Five-line loading skeleton
Principles
Adapts to the styles you have defined
The Skeleton component should be used directly in your components in place of
content that is loading. While other libraries require you to meticulously craft
a skeleton screen that matches the font size, line height, and margins of your
content, the Skeleton component is automatically sized to the correct
dimensions.
For example:
1function BlogPost(props) { 2 return ( 3 <div> 4 <h1>{props.title || <Skeleton />}</h1> 5 {props.body || <Skeleton count={10} />} 6 </div> 7 ); 8}
...will produce correctly-sized skeletons for the heading and body without any further configuration.
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.
This approach is beneficial because:
- It keeps styles in sync.
- Components should represent all possible states — loading included.
- It allows for more flexible loading patterns. In the blog post example above, it's possible to have the title load before the body, while having both pieces of content show loading skeletons at the right time.
Theming
Customize individual skeletons with props, or render a SkeletonTheme to style
all skeletons below it in the React hierarchy:
1import Skeleton, { SkeletonTheme } from 'react-loading-skeleton'; 2 3return ( 4 <SkeletonTheme baseColor="#202020" highlightColor="#444"> 5 <p> 6 <Skeleton count={3} /> 7 </p> 8 </SkeletonTheme> 9);
Props Reference
Skeleton only
| Prop | Description | Default |
|---|---|---|
count?: number |
The number of lines of skeletons to render. If
count is a decimal number like 3.5,
three full skeletons and one half-width skeleton will be
rendered.
| 1 |
wrapper?: React.FunctionComponent | A custom wrapper component that goes around the individual skeleton elements. | |
circle?: boolean |
Makes the skeleton circular by setting border-radius to
50%.
| false |
className?: string |
A custom class name for the individual skeleton elements which is used
alongside the default class, react-loading-skeleton.
| |
containerClassName?: string |
A custom class name for the <span> that wraps the
individual skeleton elements.
| |
containerTestId?: string |
A string that is added to the container element as a
data-testid attribute. Use it with
screen.getByTestId('...') from React Testing Library.
| |
style?: React.CSSProperties |
This is an escape hatch for advanced use cases and is not the preferred
way to style the skeleton. Props (e.g. width,
borderRadius) take priority over this style object.
|
Skeleton and SkeletonTheme
| Prop | Description | Default |
|---|---|---|
baseColor?: string | The background color of the skeleton. | #ebebeb |
highlightColor?: string | The highlight color in the skeleton animation. | #f5f5f5 |
width?: string | number | The width of the skeleton. | 100% |
height?: string | number | The height of each skeleton line. | The font size |
borderRadius?: string | number | The border radius of the skeleton. | 0.25rem |
inline?: boolean |
By default, a <br /> is inserted after each skeleton so
that each skeleton gets its own line. When inline is true, no
line breaks are inserted.
| false |
duration?: number | The length of the animation in seconds. | 1.5 |
direction?: 'ltr' | 'rtl' | The direction of the animation, either left-to-right or right-to-left. | 'ltr' |
enableAnimation?: boolean |
Whether the animation should play. The skeleton will be a solid color when
this is false. You could use this prop to stop the animation
if an error occurs.
| true |
customHighlightBackground?: string |
Allows you to override the background-image property of the highlight element, enabling you to fully customize the gradient. See example below.
| undefined |
Examples
Custom Wrapper
There are two ways to wrap a skeleton in a container:
1function Box({ children }: PropsWithChildren<unknown>) { 2 return ( 3 <div 4 style={{ 5 border: '1px solid #ccc', 6 display: 'block', 7 lineHeight: 2, 8 padding: '1rem', 9 marginBottom: '0.5rem', 10 width: 100, 11 }} 12 > 13 {children} 14 </div> 15 ); 16} 17 18// Method 1: Use the wrapper prop 19const wrapped1 = <Skeleton wrapper={Box} count={5} />; 20 21// Method 2: Do it "the normal way" 22const wrapped2 = ( 23 <Box> 24 <Skeleton /> 25 </Box> 26);
Custom Highlight Background
You may want to make the gradient used in the highlight element narrower or wider. To do this, you can set the customHighlightBackground prop. Here's an example of a narrow highlight:
1<Skeleton customHighlightBackground="linear-gradient(90deg, var(--base-color) 40%, var(--highlight-color) 50%, var(--base-color) 60%)" />
If you use this prop, the baseColor and highlightColor props are ignored, but you can still reference their corresponding CSS variables as shown in the above example.
Troubleshooting
The skeleton width is 0 when the parent has display: flex!
In the example below, the width of the skeleton will be 0:
1<div style={{ display: 'flex' }}> 2 <Skeleton /> 3</div>
This happens because the skeleton has no intrinsic width. You can fix it by
applying flex: 1 to the skeleton container via the containerClassName prop.
For example, if you are using Tailwind, your code would look like this:
1<div style={{ display: 'flex' }}> 2 <Skeleton containerClassName="flex-1" /> 3</div>
The height of my container is off by a few pixels!
In the example below, the height of the <div> will be slightly larger than 30
even though the react-loading-skeleton element is exactly 30px.
1<div> 2 <Skeleton height={30} /> 3</div>
This is a consequence of how line-height works in CSS. If you need the <div>
to be exactly 30px tall, set its line-height to 1. See
here
for more details.
Contributing
Contributions are welcome! See CONTRIBUTING.md to get started.
Acknowledgements
Our logo is based off an image from Font Awesome. Thanks!
No vulnerabilities found.
Reason
no dangerous workflow patterns detected
Reason
no binaries found in the repo
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: MIT License: LICENSE:0
Reason
Found 9/22 approved changesets -- score normalized to 4
Reason
0 commit(s) and 1 issue activity found in the last 90 days -- score normalized to 0
Reason
detected GitHub workflow tokens with excessive permissions
Details
- Warn: no topLevel permission defined: .github/workflows/ci.yml:1
- Info: no jobLevel write permissions found
Reason
dependency not pinned by hash detected -- score normalized to 0
Details
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:8: update your workflow using https://app.stepsecurity.io/secureworkflow/dvtng/react-loading-skeleton/ci.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:10: update your workflow using https://app.stepsecurity.io/secureworkflow/dvtng/react-loading-skeleton/ci.yml/master?enable=pin
- Info: 0 out of 2 GitHub-owned GitHubAction dependencies pinned
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
branch protection not enabled on development/release branches
Details
- Warn: branch protection not enabled for branch 'master'
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 29 are checked with a SAST tool
Reason
47 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-hpx4-r86g-5jrg
- Warn: Project is vulnerable to: GHSA-prr3-c3m5-p7q2
- Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8
- Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
- Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
- Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw
- Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
- Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-ghr5-ch3p-vcr6
- Warn: Project is vulnerable to: GHSA-67mh-4wv8-2f99
- Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc
- Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
- Warn: Project is vulnerable to: GHSA-4q6p-r6v2-jvc5
- Warn: Project is vulnerable to: GHSA-rc47-6667-2j5j
- Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22
- Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
- Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
- Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw
- Warn: Project is vulnerable to: GHSA-4wx3-54gh-9fr9
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
- Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55
- Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
- Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w
- Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
- Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm
- Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
- Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
- Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
- Warn: Project is vulnerable to: GHSA-w5hq-hm5m-4548
- Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
- Warn: Project is vulnerable to: GHSA-pq67-2wwv-3xjx
- Warn: Project is vulnerable to: GHSA-8cj5-5rvv-wf4v
- Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
- Warn: Project is vulnerable to: GHSA-353f-5xf4-qw67
- Warn: Project is vulnerable to: GHSA-c24v-8rfc-w8vw
- Warn: Project is vulnerable to: GHSA-8jhw-289h-jh2g
- Warn: Project is vulnerable to: GHSA-64vr-g452-qvp3
- Warn: Project is vulnerable to: GHSA-9cwx-2883-4wfx
- Warn: Project is vulnerable to: GHSA-vg6x-rcgg-rjx6
- Warn: Project is vulnerable to: GHSA-x574-m823-4x7w
- Warn: Project is vulnerable to: GHSA-4r4m-qw57-chr8
- Warn: Project is vulnerable to: GHSA-xcj6-pq6g-qj4x
- Warn: Project is vulnerable to: GHSA-356w-63v5-8wf4
- Warn: Project is vulnerable to: GHSA-859w-5945-r5v3
- Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7
- Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
Score
2.9
/10
Last Scanned on 2025-07-07
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More