{"id":23394639,"url":"https://github.com/yisheng90/react-loading","last_synced_at":"2025-04-11T12:54:06.961Z","repository":{"id":37420879,"uuid":"242305442","full_name":"yisheng90/react-loading","owner":"yisheng90","description":"🤚 A loading skeleton component built on React","archived":false,"fork":false,"pushed_at":"2024-09-17T05:26:13.000Z","size":8688,"stargazers_count":17,"open_issues_count":11,"forks_count":4,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-25T09:12:01.396Z","etag":null,"topics":["component","component-lib","css","frontend","javascript","library","loading","react","react-loading","skeleton-template","web"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/yisheng90.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-02-22T08:18:34.000Z","updated_at":"2024-07-03T02:37:10.000Z","dependencies_parsed_at":"2023-01-25T11:25:40.367Z","dependency_job_id":null,"html_url":"https://github.com/yisheng90/react-loading","commit_stats":null,"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yisheng90%2Freact-loading","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yisheng90%2Freact-loading/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yisheng90%2Freact-loading/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yisheng90%2Freact-loading/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yisheng90","download_url":"https://codeload.github.com/yisheng90/react-loading/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247993719,"owners_count":21030044,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["component","component-lib","css","frontend","javascript","library","loading","react","react-loading","skeleton-template","web"],"created_at":"2024-12-22T06:17:38.764Z","updated_at":"2025-04-11T12:54:06.943Z","avatar_url":"https://github.com/yisheng90.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ![Skleton](https://res.cloudinary.com/duuqqcc3z/image/upload/v1587462403/react-loading/skull_1.svg) React Loading\n\n\u003c!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section --\u003e\n\n[![All Contributors](https://img.shields.io/badge/all_contributors-0-orange.svg?style=flat-square)](#contributors-)\n\n\u003c!-- ALL-CONTRIBUTORS-BADGE:END --\u003e\n\n[![Build Status](https://travis-ci.org/yisheng90/react-loading.png?branch=master)](https://travis-ci.org/yisheng90/react-loading)\n[![codecov](https://codecov.io/gh/yisheng90/react-loading/branch/master/graph/badge.svg)](https://codecov.io/gh/yisheng90/react-loading)\n[![contributions welcome](https://img.shields.io/badge/contributions-welcome-brightgreen.svg?style=flat)](https://github.com/dwyl/esta/issues)\n![Publish NPM](https://github.com/yisheng90/react-loading/workflows/Publish%20NPM/badge.svg)\n\nLoading Skleton component building block to easily create placholder loadings.\n\n![Example](https://res.cloudinary.com/duuqqcc3z/image/upload/v1587462782/react-loading/Screen-Recording-2020-04-21-at-5.gif)\n\n### Features\n\n🎨 **Customizable** - You can change the color, size and shape of the skeleton\n\n🎮 **Plug and Play** - You can just import the component and start using it\n\n🏠 **Building block** - You can use it as a building block to build complex loading component\n\n🧸 **Easy to adapt** - It is a react component.\n\n### Docs\n\n[Storybook](https://yisheng90.github.io/react-loading/?path=/docs/react-loading-welcome--page)\n\n### Getting Started\n\nInstall via `yarn` or `npm`\n\n```bash\nnpm install @yisheng90/react-loading --save\n```\n\nor\n\n```bash\nyarn add  @yisheng90/react-loading\n```\n\n### Usage\n\nThere are two ways to use it.\n\n**1. Use it as a component**\n\n```jsx\nimport Skeleton from \"@yisheng90/react-loading\";\n\n\u003cSkeleton /\u003e;\n```\n\n**2. Use it as a building block**\n\n```jsx\nimport Skeleton from \"@yisheng90/react-loading\";\n\nconst CardSkleton = () =\u003e (\n  \u003cdiv style={{ display: \"flex\", padding: \"20px\" }}\u003e\n    \u003cSkeleton width={45} circle color=\"pink\" /\u003e\n    \u003cdiv\n      style={{\n        display: \"flex\",\n        flexDirection: \"column\",\n        justifyContent: \"space-evenly\",\n        width: \"100%\",\n        marginLeft: \"20px\",\n      }}\n    \u003e\n      \u003cSkeleton color=\"pink\" /\u003e\n      \u003cSkeleton width=\"50%\" color=\"pink\" /\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n);\n```\n\n### Props\n\n**`rows?: number`**\n\nDefaults to 1. It is used to determine the number of rows to be display.\n\n_notes: This option will be ignored if `circle` is set as true_\n\n**`width?: number | string`**\n\nDefaults to 100%. It is used to set the width of the skeleton. You can set it using `%`, `rem` or `px`.\n\n**`height?: number | string`**\n\nDefaults to 100%. It is used to set the height of the skeleton. You can set it using `%`, `rem` or `px`.\n\n**`circle?: boolean`**\n\nDefaults to false. It is used to set shape of the skleton.\n\n**`color?: string`**\n\nIt is used to set the color of the skleton. You can set it using `hex`, `rgb` or `rgba`.\n\n**`translucent?: boolean`**\n\nDefaults to false. It is used to set the opacity of the skleton.\n\n**`radius?: number`**\n\nDefaults to 4px. It is used to determine the border radius of the rows. The unit is in `px`.\n\n_notes: This option will be ignored if `circle` is set as true_\n\n### Examples\n\n#### Rows\n\n\u003cimg src=\"https://i.imgur.com/bA5LKdJ.gif\" width=\"500\"\u003e\n\n```jsx\n\u003cSkeleton width={250} rows={6} /\u003e\n```\n\n#### Width\n\n\u003cimg src=\"https://i.imgur.com/8wAUZX4.gif\" width=\"500\"\u003e\n\n```jsx\n    \u003cSkeleton width={250}/\u003e\n    \u003cSkeleton width=\"250px\"/\u003e\n    \u003cSkeleton width=\"5rem\"/\u003e\n```\n\n#### Height\n\n\u003cimg src=\"https://i.imgur.com/k7LDwjD.gif\"  width=\"500\"\u003e\n\n```jsx\n    \u003cSkeleton height={25} /\u003e\n    \u003cSkeleton height=\"25px\" /\u003e\n    \u003cSkeleton height=\"3rem\" /\u003e\n```\n\n### Circle\n\n\u003cimg src=\"https://media.tenor.com/images/1def707702cd55ef88a6fb56ca85ed32/tenor.gif\" width=\"500\"\u003e\n\n```jsx\n    \u003cSkeleton circle width={35} /\u003e\n    \u003cSkeleton circle width={55} /\u003e\n    \u003cSkeleton circle width={75} /\u003e\n    \u003cSkeleton circle width={95} /\u003e\n    \u003cSkeleton circle width={115} /\u003e\n```\n\n### Color\n\n\u003cimg src=\"https://media1.tenor.com/images/864728696b8974c3b7ddb69985982dee/tenor.gif?itemid=16905339\"\u003e\n\n```jsx\n    \u003cSkeleton color=\"pink\" circle width={35}/\u003e\n    \u003cSkeleton color=\"#F8B195\" circle width={35}/\u003e\n    \u003cSkeleton color=\"#2A363B\" circle width={35}/\u003e\n    \u003cSkeleton color=\"rgb(25,67,89)\" circle width={35}/\u003e\n    \u003cSkeleton color=\"rgba(25,67,89, 0.3)\" circle width={35}/\u003e\n```\n\n### Translucent\n\n\u003cimg src=\"https://media.tenor.com/images/b4889c52dff909fcc84a6038b466f8ae/tenor.gif\"\u003e\n\n```jsx\n\u003cSkeleton color=\"black\" width={250} height={30} translucent /\u003e\n```\n\n## Contributing\n\nPull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.\n\nPlease make sure to update tests as appropriate.\n\n## License\n\n[MIT](https://choosealicense.com/licenses/mit/)\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore-start --\u003e\n\u003c!-- markdownlint-disable --\u003e\n\u003c!-- markdownlint-restore --\u003e\n\u003c!-- prettier-ignore-end --\u003e\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyisheng90%2Freact-loading","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyisheng90%2Freact-loading","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyisheng90%2Freact-loading/lists"}