{"id":16702671,"url":"https://github.com/goldenfishe/react-loader-placeholder","last_synced_at":"2025-12-31T00:30:14.320Z","repository":{"id":47980739,"uuid":"199176353","full_name":"GoldenFishe/react-loader-placeholder","owner":"GoldenFishe","description":"A React library used to make your loader awesome","archived":false,"fork":false,"pushed_at":"2024-10-12T16:53:03.000Z","size":299,"stargazers_count":3,"open_issues_count":6,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-16T00:02:22.221Z","etag":null,"topics":["awesome","component","javascript","loader","placholder","react","spiner"],"latest_commit_sha":null,"homepage":"https://github.com/GoldenFishe/react-loader-placeholder#readme","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/GoldenFishe.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"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}},"created_at":"2019-07-27T14:39:42.000Z","updated_at":"2024-12-20T16:09:48.000Z","dependencies_parsed_at":"2024-10-31T17:02:01.291Z","dependency_job_id":"4e6dc9b6-5ecf-4211-92ed-ee4b654803fe","html_url":"https://github.com/GoldenFishe/react-loader-placeholder","commit_stats":{"total_commits":15,"total_committers":3,"mean_commits":5.0,"dds":0.5333333333333333,"last_synced_commit":"d677777b35b64ac24a12fd3c63cd27baf3597b8d"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GoldenFishe%2Freact-loader-placeholder","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GoldenFishe%2Freact-loader-placeholder/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GoldenFishe%2Freact-loader-placeholder/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GoldenFishe%2Freact-loader-placeholder/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/GoldenFishe","download_url":"https://codeload.github.com/GoldenFishe/react-loader-placeholder/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239140174,"owners_count":19588357,"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":["awesome","component","javascript","loader","placholder","react","spiner"],"created_at":"2024-10-12T19:05:45.691Z","updated_at":"2025-12-31T00:30:14.220Z","avatar_url":"https://github.com/GoldenFishe.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-loader-placeholder \n![npm version](https://badge.fury.io/js/react-loader-placeholder.svg)\n![npm](https://img.shields.io/npm/dm/react-loader-placeholder)\n![npm bundle size](https://img.shields.io/bundlephobia/min/react-loader-placeholder?color=green)\n\nMake beautiful, animated loading that easy adapt to your app.\n\n![Gif in action](https://media.giphy.com/media/JU3rc5Tn6kpYUNMnah/giphy.gif)\n\n## Install\n\n`npm install react-loader-placeholder`\n\n## Principles\nThe `\u003cReactLoaderPlaceholder\u003e`  uses HTML `data` attribute for mark items and CSS for style that items. \n\n![Base usabe code](https://i.imgur.com/TJjPSr2.png)\n\n## Usage\n\n1. Wrap component or HTML with `\u003cReactLoaderPlaceholder\u003e`.\n2. Set `loading` prop.\n3. Mark HTML items with `data-react-loader-placeholder={true}` attribute.\n4. ?????\n5. PROFIT.\n\nIf you need to enable or disable not all marked items, just set `data-react-loader-placeholder}` to `true` or `false`.\n\n##Props\n\nThe `\u003cReactLoaderPlaceholder\u003e`  component props:\n- **loading** `boolean` _required_ - Enable or disable placeholder.\n- **color** `string` _optional_ - Background color of placeholder item.\n- **disableAnimation** `boolean` _optional_ - Enable or disable animation.\n- **className** `string` _optional_ \n- **style** `Object` _optional_\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgoldenfishe%2Freact-loader-placeholder","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgoldenfishe%2Freact-loader-placeholder","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgoldenfishe%2Freact-loader-placeholder/lists"}