{"id":13393201,"url":"https://github.com/danilowoz/react-content-loader","last_synced_at":"2026-01-22T18:51:41.749Z","repository":{"id":37706096,"uuid":"79509385","full_name":"danilowoz/react-content-loader","owner":"danilowoz","description":"⚪ SVG-Powered component to easily create skeleton loadings.","archived":false,"fork":false,"pushed_at":"2025-07-14T08:39:24.000Z","size":6627,"stargazers_count":13981,"open_issues_count":21,"forks_count":425,"subscribers_count":83,"default_branch":"master","last_synced_at":"2025-11-22T07:51:27.646Z","etag":null,"topics":["facebook-cards-loaders","hacktoberfest","loader","loading","placeholder","react","react-native","react-native-components","skeleton","skeleton-screen","svg"],"latest_commit_sha":null,"homepage":"https://skeletonreact.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/danilowoz.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null},"funding":{"github":["danilowoz"],"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2017-01-20T00:30:11.000Z","updated_at":"2025-11-21T01:47:26.000Z","dependencies_parsed_at":"2024-06-18T10:57:55.900Z","dependency_job_id":"fb909481-7f1b-4d29-991b-fe8579f1760f","html_url":"https://github.com/danilowoz/react-content-loader","commit_stats":{"total_commits":258,"total_committers":51,"mean_commits":"5.0588235294117645","dds":"0.32170542635658916","last_synced_commit":"418fae973e7b54cd43ec6d6eaf50cad505108378"},"previous_names":[],"tags_count":50,"template":false,"template_full_name":null,"purl":"pkg:github/danilowoz/react-content-loader","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danilowoz%2Freact-content-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danilowoz%2Freact-content-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danilowoz%2Freact-content-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danilowoz%2Freact-content-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/danilowoz","download_url":"https://codeload.github.com/danilowoz/react-content-loader/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danilowoz%2Freact-content-loader/sbom","scorecard":{"id":320863,"data":{"date":"2025-08-11","repo":{"name":"github.com/danilowoz/react-content-loader","commit":"7dd345f36b5a58858feb5d0214cbe13cce08fa4c"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":3.5,"checks":[{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Maintained","score":2,"reason":"3 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 2","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Dangerous-Workflow","score":10,"reason":"no dangerous workflow patterns detected","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Code-Review","score":5,"reason":"Found 8/16 approved changesets -- score normalized to 5","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Pinned-Dependencies","score":0,"reason":"dependency not pinned by hash detected -- score normalized to 0","details":["Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:16: update your workflow using https://app.stepsecurity.io/secureworkflow/danilowoz/react-content-loader/ci.yml/master?enable=pin","Warn: third-party GitHubAction not pinned by hash: .github/workflows/ci.yml:18: update your workflow using https://app.stepsecurity.io/secureworkflow/danilowoz/react-content-loader/ci.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:23: update your workflow using https://app.stepsecurity.io/secureworkflow/danilowoz/react-content-loader/ci.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:15: update your workflow using https://app.stepsecurity.io/secureworkflow/danilowoz/react-content-loader/release.yml/master?enable=pin","Warn: third-party GitHubAction not pinned by hash: .github/workflows/release.yml:17: update your workflow using https://app.stepsecurity.io/secureworkflow/danilowoz/react-content-loader/release.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:22: update your workflow using https://app.stepsecurity.io/secureworkflow/danilowoz/react-content-loader/release.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:40: update your workflow using https://app.stepsecurity.io/secureworkflow/danilowoz/react-content-loader/release.yml/master?enable=pin","Warn: third-party GitHubAction not pinned by hash: .github/workflows/release.yml:42: update your workflow using https://app.stepsecurity.io/secureworkflow/danilowoz/react-content-loader/release.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:47: update your workflow using https://app.stepsecurity.io/secureworkflow/danilowoz/react-content-loader/release.yml/master?enable=pin","Info:   0 out of   6 GitHub-owned GitHubAction dependencies pinned","Info:   0 out of   3 third-party GitHubAction dependencies pinned"],"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"Token-Permissions","score":0,"reason":"detected GitHub workflow tokens with excessive permissions","details":["Warn: no topLevel permission defined: .github/workflows/ci.yml:1","Warn: no topLevel permission defined: .github/workflows/release.yml:1","Info: no jobLevel write permissions found"],"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"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"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":-1,"reason":"internal error: error during branchesHandler.setup: internal error: githubv4.Query: Resource not accessible by integration","details":null,"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 27 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Vulnerabilities","score":0,"reason":"45 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8","Warn: Project is vulnerable to: GHSA-rmvr-2pp2-xj38","Warn: Project is vulnerable to: GHSA-xx4v-prfh-6cgc","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-mpg4-rc92-vx8v","Warn: Project is vulnerable to: GHSA-fjxv-7rqg-78g4","Warn: Project is vulnerable to: GHSA-vfrc-7r7c-w9mx","Warn: Project is vulnerable to: GHSA-7wwv-vh3v-89cq","Warn: Project is vulnerable to: GHSA-m5qc-5hw7-8vg7","Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp","Warn: Project is vulnerable to: GHSA-5v2h-r2cx-5xgj","Warn: Project is vulnerable to: GHSA-rrrm-qjm4-v8hf","Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv","Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55","Warn: Project is vulnerable to: GHSA-hj9c-8jmm-8c52","Warn: Project is vulnerable to: GHSA-76c9-3jph-rj3q","Warn: Project is vulnerable to: GHSA-j9fq-vwqv-2fm2","Warn: Project is vulnerable to: GHSA-pqw5-jmp5-px4v","Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j","Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w","Warn: Project is vulnerable to: GHSA-wvhm-4hhf-97x9","Warn: Project is vulnerable to: GHSA-h4hr-7fg3-h35w","Warn: Project is vulnerable to: GHSA-gj77-59wh-66hg","Warn: Project is vulnerable to: GHSA-hqhp-5p83-hx96","Warn: Project is vulnerable to: GHSA-3949-f494-cm99","Warn: Project is vulnerable to: GHSA-x7hr-w5r2-h6wg","Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm","Warn: Project is vulnerable to: GHSA-x2pg-mjhr-2m5x","Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw","Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg","Warn: Project is vulnerable to: GHSA-hxcc-f52p-wc94","Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p","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-52f5-9888-hmc6","Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-18T01:20:01.808Z","repository_id":37706096,"created_at":"2025-08-18T01:20:01.808Z","updated_at":"2025-08-18T01:20:01.808Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28668538,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-22T17:07:18.858Z","status":"ssl_error","status_checked_at":"2026-01-22T17:05:02.040Z","response_time":144,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["facebook-cards-loaders","hacktoberfest","loader","loading","placeholder","react","react-native","react-native-components","skeleton","skeleton-screen","svg"],"created_at":"2024-07-30T17:00:46.168Z","updated_at":"2026-01-22T18:51:41.725Z","avatar_url":"https://github.com/danilowoz.png","language":"TypeScript","readme":"\u003cp align=\"center\"\u003e\n  \u003cimg width=\"350\" alt=\"react-content-loader\" src=\"https://user-images.githubusercontent.com/4838076/34419335-5669c3f8-ebea-11e7-9668-c47b7846970b.png\"/\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  \u003cimg width=\"400\" alt=\"Example's react-content-loader\" src=\"https://user-images.githubusercontent.com/4838076/34308760-ec55df82-e735-11e7-843b-2e311fa7b7d0.gif\" /\u003e\n\u003c/p\u003e\n\nSVG-Powered component to easily create placeholder loadings (like Facebook's cards loading).\n\n## Features\n\n- :gear: **Customizable:** Feel free to change the colors, speed, sizes, and even **RTL**;\n- :ok_hand: **Plug and play:** with many presets to use, see the [examples](http://danilowoz.com/create-content-loader/#gallery);\n- :pencil2: **DIY:** use the [create-content-loader](https://danilowoz.com/create-content-loader) to create your own custom loaders easily;\n- 📱 **React Native support**: same API, as same powerful features;\n- ⚛️ **Really lightweight:** less than **2kB** and **0 dependencies** for web version;\n\n## Index\n\n- [Getting Started](#gettingstarted)\n- [Usage](#usage)\n  - [Native](#native)\n- [Options](#options)\n- [Examples](#examples)\n- [Troubleshooting](#troubleshooting)\n- [Similar packages](#similarpackages)\n- [Development](#development)\n\n## Getting Started\n\n```sh\nnpm i react-content-loader --save\n```\n\n```sh\nyarn add react-content-loader\n```\n\n### For React Native\n\n```sh\nnpm i react-content-loader react-native-svg --save\n```\n\n```sh\nyarn add react-content-loader react-native-svg\n```\n\nCDN from [JSDELIVR](https://www.jsdelivr.com/package/npm/react-content-loader)\n\n## Usage\n\nThere are two ways to use it:\n\n**1. Presets, see the [examples](https://danilowoz.com/react-content-loader/):**\n\n```jsx\nimport ContentLoader, { Facebook } from 'react-content-loader'\n\nconst MyLoader = () =\u003e \u003cContentLoader /\u003e\nconst MyFacebookLoader = () =\u003e \u003cFacebook /\u003e\n```\n\n**2. Custom mode, see the [online tool](https://danilowoz.com/create-content-loader)**\n\n```jsx\nconst MyLoader = () =\u003e (\n  \u003cContentLoader viewBox=\"0 0 380 70\"\u003e\n    {/* Only SVG shapes */}    \n    \u003crect x=\"0\" y=\"0\" rx=\"5\" ry=\"5\" width=\"70\" height=\"70\" /\u003e\n    \u003crect x=\"80\" y=\"17\" rx=\"4\" ry=\"4\" width=\"300\" height=\"13\" /\u003e\n    \u003crect x=\"80\" y=\"40\" rx=\"3\" ry=\"3\" width=\"250\" height=\"10\" /\u003e\n  \u003c/ContentLoader\u003e\n)\n```\n\n**Still not clear?** Take a look at this working example at [codesandbox.io](https://codesandbox.io/s/moojk887z9)\nOr try the components editable demo hands-on and install it from [bit.dev](https://bit.dev/danilowoz/react-content-loader)\n\n## Native\n\n`react-content-loader` can be used with React Native in the same way as web version with the same import:\n\n**1. Presets, see the [examples](#examples):**\n\n```jsx\nimport ContentLoader, { Facebook } from 'react-content-loader/native'\n\nconst MyLoader = () =\u003e \u003cContentLoader /\u003e\nconst MyFacebookLoader = () =\u003e \u003cFacebook /\u003e\n```\n\n**2. Custom mode**\n\n**To create custom loaders there is an important difference:** as React Native doesn't have any native module for SVG components, it's necessary to import the shapes from [react-native-svg](https://github.com/react-native-community/react-native-svg) or use the named export Rect and Circle from `react-content-loader` import:\n\n```jsx\nimport ContentLoader, { Rect, Circle } from 'react-content-loader/native'\n\nconst MyLoader = () =\u003e (\n  \u003cContentLoader viewBox=\"0 0 380 70\"\u003e\n    \u003cCircle cx=\"30\" cy=\"30\" r=\"30\" /\u003e\n    \u003cRect x=\"80\" y=\"17\" rx=\"4\" ry=\"4\" width=\"300\" height=\"13\" /\u003e\n    \u003cRect x=\"80\" y=\"40\" rx=\"3\" ry=\"3\" width=\"250\" height=\"10\" /\u003e\n  \u003c/ContentLoader\u003e\n)\n```\n\n## Options\n\n| \u003cdiv style=\"width:250px\"\u003eProp name and type\u003c/div\u003e                | Environment                | Description                                                                                                                                                                                                                                                                                         |\n| ---------------------------------------------------------------- | -------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| **`animate?: boolean`** \u003cbr/\u003e Defaults to `true`                 | React DOM\u003cbr/\u003eReact Native | Opt-out of animations with `false`                                                                                                                                                                                                                                                                  |\n| **`title?: string`** \u003cbr/\u003e Defaults to `Loading...`              | React DOM only             | It's used to describe what element it is. \u003cbr /\u003eUse `''` (empty string) to remove.                                                                                                                                                                                                                  |\n| **`baseUrl?: string`**\u003cbr /\u003e Defaults to an empty string         | React DOM only             | Required if you're using `\u003cbase url=\"/\" /\u003e` document `\u003chead/\u003e`. \u003cbr/\u003eThis prop is common used as: \u003cbr/\u003e`\u003cContentLoader baseUrl={window.location.pathname} /\u003e` which will fill the SVG attribute with the relative path. Related [#93](https://github.com/danilowoz/react-content-loader/issues/93). |\n| **`speed?: number`** \u003cbr /\u003e Defaults to `1.2`                    | React DOM\u003cbr/\u003eReact Native | Animation speed in seconds.                                                                                                                                                                                                                                                                         |\n| **`viewBox?: string`** \u003cbr /\u003e Defaults to `undefined`            | React DOM\u003cbr/\u003eReact Native | Use viewBox props to set a custom viewBox value, \u003cbr/\u003efor more information about how to use it, \u003cbr/\u003eread the article [How to Scale SVG](https://css-tricks.com/scale-svg/).                                                                                                                        |\n| **`gradientRatio?: number`** \u003cbr /\u003e Defaults to `1.2`            | React DOM only             | Width of the animated gradient as a fraction of the view box width.                                                                                                                                                                                                                                 |\n| **`rtl?: boolean`** \u003cbr /\u003e Defaults to `false`                   | React DOM\u003cbr/\u003eReact Native | Content right-to-left.                                                                                                                                                                                                                                                                              |\n| **`backgroundColor?: string`** \u003cbr /\u003e Defaults to `#f5f6f7`      | React DOM\u003cbr/\u003eReact Native | Used as background of animation.                                                                                                                                                                                                                                                                    |\n| **`foregroundColor?: string`** \u003cbr /\u003e Defaults to `#eee`         | React DOM\u003cbr/\u003eReact Native | Used as the foreground of animation.                                                                                                                                                                                                                                                                |\n| **`backgroundOpacity?: number`** \u003cbr /\u003e Defaults to `1`          | React DOM\u003cbr/\u003eReact Native | Background opacity (0 = transparent, 1 = opaque)\u003cbr/\u003eused to solve an issue in [Safari](#safari--ios)                                                                                                                                                                                               |\n| **`foregroundOpacity?: number`** \u003cbr /\u003e Defaults to `1`          | React DOM\u003cbr/\u003eReact Native | Animation opacity (0 = transparent, 1 = opaque)\u003cbr/\u003eused to solve an issue in [Safari](#safari--ios)                                                                                                                                                                                                |\n| **`style?: React.CSSProperties`** \u003cbr /\u003e Defaults to `{}`        | React DOM only             |                                                                                                                                                                                                                                                                                                     |\n| **`uniqueKey?: string`** \u003cbr /\u003e Defaults to random unique id     | React DOM only             | Use the same value of prop key, \u003cbr/\u003ethat will solve inconsistency on the SSR, see more [here](https://github.com/danilowoz/react-content-loader/issues/78).                                                                                                                                        |\n| **`beforeMask?: JSX.Element`** \u003cbr /\u003e Defaults to null           | React DOM\u003cbr/\u003eReact Native | Define custom shapes before content, \u003cbr/\u003esee more [here](https://github.com/danilowoz/react-content-loader/issues/266).                                                                                                                                                                            |\n\nSee all options [live](https://danilowoz.com/react-content-loader/)\n\n## Examples\n\n##### Facebook Style\n\n```jsx\nimport { Facebook } from 'react-content-loader'\n\nconst MyFacebookLoader = () =\u003e \u003cFacebook /\u003e\n```\n\n\u003cimg alt=\"Facebook Style\" src=\"https://user-images.githubusercontent.com/4838076/73212460-328f7500-4146-11ea-99e7-e19cd4e07a51.png\" width=\"500px\" /\u003e\n\n##### Instagram Style\n\n```jsx\nimport { Instagram } from 'react-content-loader'\n\nconst MyInstagramLoader = () =\u003e \u003cInstagram /\u003e\n```\n\n\u003cimg alt=\"Instagram Style\" src=\"https://user-images.githubusercontent.com/4838076/73212462-328f7500-4146-11ea-98dc-3a6aeafd4a26.png\" width=\"500px\" /\u003e\n\n##### Code Style\n\n```jsx\nimport { Code } from 'react-content-loader'\n\nconst MyCodeLoader = () =\u003e \u003cCode /\u003e\n```\n\n\u003cimg alt=\"Code Style\" src=\"https://user-images.githubusercontent.com/4838076/73212459-328f7500-4146-11ea-89b0-1b7bbae8047b.png\" width=\"500px\" /\u003e\n\n##### List Style\n\n```jsx\nimport { List } from 'react-content-loader'\n\nconst MyListLoader = () =\u003e \u003cList /\u003e\n```\n\n\u003cimg alt=\"List Style\" src=\"https://user-images.githubusercontent.com/4838076/73212463-33280b80-4146-11ea-9f93-95c2cbdef17b.png\" width=\"500px\" /\u003e\n\n##### Bullet list Style\n\n```jsx\nimport { BulletList } from 'react-content-loader'\n\nconst MyBulletListLoader = () =\u003e \u003cBulletList /\u003e\n```\n\n\u003cimg alt=\"Bullet list Style\" src=\"https://user-images.githubusercontent.com/4838076/73212458-328f7500-4146-11ea-826f-576059c4644e.png\" width=\"500px\" /\u003e\n\n### Custom Style\n\nFor the custom mode, use the\n[online tool](https://danilowoz.com/create-content-loader).\n\n```jsx\nconst MyLoader = () =\u003e (\n  \u003cContentLoader\n    height={140}\n    speed={1}\n    backgroundColor={'#333'}\n    foregroundColor={'#999'}\n    viewBox=\"0 0 380 70\"\n  \u003e\n    {/* Only SVG shapes */}\n    \u003crect x=\"0\" y=\"0\" rx=\"5\" ry=\"5\" width=\"70\" height=\"70\" /\u003e\n    \u003crect x=\"80\" y=\"17\" rx=\"4\" ry=\"4\" width=\"300\" height=\"13\" /\u003e\n    \u003crect x=\"80\" y=\"40\" rx=\"3\" ry=\"3\" width=\"250\" height=\"10\" /\u003e\n  \u003c/ContentLoader\u003e\n)\n```\n\n![Custom](https://user-images.githubusercontent.com/4838076/36352947-b87019a8-149e-11e8-99ba-c71c2bcf8733.gif)\n\n## Troubleshooting\n\n#### Responsive - Mobile version\n\nIn order to avoid unexpected behavior, the package doesn't have opinioned settings. So if it needs to be responsive, have in mind that the output of the package is a regular SVG, so it just needs the same attributes to become a regular SVG responsive, which means:\n\n```jsx\nimport { Code } from 'react-content-loader'\n\nconst MyCodeLoader = () =\u003e (\n  \u003cCode\n    width={100}\n    height={100}\n    viewBox=\"0 0 100 100\"\n    style={{ width: '100%' }}\n  /\u003e\n)\n```\n\n#### Server-side rendering (SSR) - Match snapshot\n\nAs the main component generates random values to match the id of the SVG element with background style, it can encounter unexpected errors and unmatching warning on render, once the random value of id will be generated twice, in case of SSR: server and client; or in case of snapshot test: on the first match and re-running the test.\n\nTo fix it, set the prop [`uniqueKey`](https://github.com/danilowoz/react-content-loader#uniquekey-string---web-only), then the id will not be random anymore:\n\n```jsx\nimport { Facebook } from 'react-content-loader'\n\nconst MyFacebookLoader = () =\u003e \u003cFacebook uniqueKey=\"my-random-value\" /\u003e\n```\n\n#### **Alpha is not working: Safari / iOS**\n\nWhen using `rgba` as a `backgroundColor` or `foregroundColor` value, [Safari does not respect the alpha channel](https://github.com/w3c/svgwg/issues/180), meaning that the color will be opaque. To prevent this, instead of using a `rgba` value for `backgroundColor`/`foregroundColor`, use the `rgb` equivalent and move the alpha channel value to the `backgroundOpacity`/`foregroundOpacity` props.\n\n```jsx\n{/* Opaque color in Safari and iOS */}\n\u003cContentLoader\n  backgroundColor=\"rgba(0,0,0,0.06)\"\n  foregroundColor=\"rgba(0,0,0,0.12)\"\u003e\n\n\n{/_ Semi-transparent color in Safari and iOS _/}\n\u003cContentLoader\n    backgroundColor=\"rgb(0,0,0)\"\n    foregroundColor=\"rgb(0,0,0)\"\n    backgroundOpacity={0.06}\n    foregroundOpacity={0.12}\u003e\n\n\n```\n\n#### **Black box in Safari / iOS (again)**\n\nUsing the base tag on a page that contains SVG elements fails to render and it looks like a black box. Just remove the **base-href** tag from the `\u003chead /\u003e` and the issue has been solved.\n\n\u003cimg width=\"350\" src=\"https://user-images.githubusercontent.com/11562881/39406054-2f308de6-4bce-11e8-91fb-bbb35e29fc10.png\" alt=\"black box\" /\u003e\n\nSee: [#93](https://github.com/danilowoz/react-content-loader/issues/93) / [109](https://github.com/danilowoz/react-content-loader/issues/109)\n\n#### Browser supports SVG-Animate\n\nOld browsers don't support animation in SVG ([compatibility list](https://caniuse.com/#search=SVGAnimateElement)), and if your project must support IE, for examples, here's a couple of ways to make sure that browser supports SVG Animate:\n\n- `window.SVGAnimateElement`\n- `document.implementation.hasFeature(\"http://www.w3.org/TR/SVG11/feature#SVG-Animation\", \"1.1\")`\n- Or even use https://modernizr.com/\n\n## Similar packages\n\n- React Native: [rn-placeholder](https://github.com/mfrachet/rn-placeholder), [react-native-svg-animated-linear-gradient](https://github.com/virusvn/react-native-svg-animated-linear-gradient);\n- [Preact](https://github.com/bonitasoft/preact-content-loader);\n- Vue.js: [vue-content-loading](https://github.com/LucasLeandro1204/vue-content-loading), [vue-content-loader](https://github.com/egoist/vue-content-loader);\n- Angular: [ngx-content-loading](https://github.com/Gbuomprisco/ngx-content-loading), [ngx-content-loader](https://github.com/NetanelBasal/ngx-content-loader).\n\n---\n\n## Development\n\nFork the repo and then clone it\n\n```\n$ git clone git@github.com:YourUsername/react-content-loader.git \u0026\u0026 cd react-content-loader\n```\n\n`$ npm i`: Install the dependencies;\n\n`$ npm run build`: Build to production;\n\n`$ npm run dev`: Run the Storybook to see your changes;\n\n`$ npm run test`: Run all tests: type checking, unit tests on web and native;\n\n`$ npm run test:watch`: Watch unit tests;\n\n### React Native\n\nAs React Native doesn't support symbolic links (to link the dependency to another folder) and as there is no playground to check your contributions (like storybook), this is recommended strategy to run the project locally:\n\n1. Create a new React Native from scratch, either Metro or create-react-native-app;\n2. Install the dependency to your root project:\n   `yarn add react-content-loader react-native-svg`\n3. Open the project just created and clone this repository there;\n4. Create your loading component and point the `react-content-loader` to the project just cloned, like:\n   `import ContentLoader, { Rect, Circle } from './react-content-loader/native'`\n\n### Commit messages\n\nCommit messages should follow the [commit message convention](https://conventionalcommits.org/) so, changelogs could be generated automatically by that. Commit messages are validated automatically upon commit. If you aren't familiar with the commit message convention, you can use yarn commit (or `npm run commit`) instead of git commit, which provides an interactive CLI for generating proper commit messages.\n\n## License\n\n[MIT](https://github.com/danilowoz/react-content-loader/blob/master/LICENSE)\n","funding_links":["https://github.com/sponsors/danilowoz"],"categories":["UI Components","Other Components","TypeScript","JavaScript","目录","*.js","前端开发框架及项目","React","Uncategorized","UI Components / UI Tools"],"sub_categories":["Component","Loader","React相关","React","其他_文本生成、文本对话","React Components","Uncategorized"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdanilowoz%2Freact-content-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdanilowoz%2Freact-content-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdanilowoz%2Freact-content-loader/lists"}