{"id":15007749,"url":"https://github.com/tfmteixeira/react-animate-load","last_synced_at":"2026-02-06T16:33:08.505Z","repository":{"id":255438220,"uuid":"845588345","full_name":"tfmteixeira/react-animate-load","owner":"tfmteixeira","description":"Hold tight, awesome stuff is loading!","archived":false,"fork":false,"pushed_at":"2024-09-10T15:14:23.000Z","size":4279,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-09-21T18:31:34.343Z","etag":null,"topics":["css-animation","loading-animation","npm-package","react-component"],"latest_commit_sha":null,"homepage":"","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/tfmteixeira.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":"CODEOWNERS.md","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-08-21T14:34:37.000Z","updated_at":"2024-09-10T15:21:39.000Z","dependencies_parsed_at":"2024-09-28T15:21:08.128Z","dependency_job_id":"20de9242-b6a9-4d03-a2b6-fc8d76cf6cd8","html_url":"https://github.com/tfmteixeira/react-animate-load","commit_stats":null,"previous_names":["tfmteixeira/react-animate-load"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/tfmteixeira/react-animate-load","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tfmteixeira%2Freact-animate-load","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tfmteixeira%2Freact-animate-load/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tfmteixeira%2Freact-animate-load/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tfmteixeira%2Freact-animate-load/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tfmteixeira","download_url":"https://codeload.github.com/tfmteixeira/react-animate-load/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tfmteixeira%2Freact-animate-load/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29168516,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-06T15:38:29.831Z","status":"ssl_error","status_checked_at":"2026-02-06T15:37:48.592Z","response_time":59,"last_error":"SSL_read: 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":["css-animation","loading-animation","npm-package","react-component"],"created_at":"2024-09-24T19:13:38.799Z","updated_at":"2026-02-06T16:33:08.486Z","avatar_url":"https://github.com/tfmteixeira.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Animate Load\n\nAnimate Load is a lightweight React component for creating animated loading placeholders that automatically adapt to your app.\n\n![Animate Load Demo](assets/intro.gif)\n\n#### 👉 [Codesand Demo Here ](https://codesandbox.io/p/sandbox/react-animate-load-example-yt4mv8) 👈\n\n## Installation\n\nYou can install the library via npm or yarn:\n\n```bash\nnpm install react-animate-load\n```\n\nor\n\n```bash\nyarn add react-animate-load\n```\n\n## Usage\n\nHere's a basic example of how to use the Animate Load component in your React project:\n\n```tsx\nimport { AnimateLoad, Align } from \"react-animate-load\";\n\n\u003cAnimateLoad /\u003e // Using the default values\n\n\u003cAnimateLoad numRows={3}/\u003e // Three lines loading skeleton\n\n\u003cAnimateLoad\n      width=\"500px\"\n      height=\"200px\"\n      animation=\"pulse\"\n      numRows={3}\n      gapRow=\"10px\"\n      roundCorner={true}\n      primaryColor=\"#e2e2e2\"\n      secondaryColor=\"#c8c8c8\"\n      align={Align.CENTER}\n      customRows={[\n        { index: 0, width: \"100%\", height: \"20px\" },\n        { index: 1, width: \"80%\", height: \"20px\" },\n        { index: 2, width: \"60%\", height: \"20px\" },\n      ]}\n    /\u003e // Full customized loading\n```\n\n#### The default width and height is the same as his parent component, but it is possible to change them using props\n\n## Props\n\n| Prop Name        | Type                  | Default Value | Description                                                 |\n| ---------------- | --------------------- | ------------- | ----------------------------------------------------------- |\n| `width`          | `string`              | `\"100%\"`      | The width value of the container.                           |\n| `height`         | `string`              | `\"100%\"`      | The height value of the container.                          |\n| `animation`      | `string`              | `\"pulse\"`     | The type of animation to apply (`PULSE` or `WAVE`).         |\n| `numRows`        | `number`              | `1`           | The number of animated rows to display.                     |\n| `customRows`     | `CustomRow[]`         | `[]`          | Array to define custom dimensions for specific rows.        |\n| `gapRow`         | `string`              | `\"4px\"`       | Gap between the rows.                                       |\n| `roundCorner`    | `boolean`             | `true`        | Whether the rows should have rounded corners.               |\n| `round`          | `boolean`             | `false`       | Whether the placeholder should be round.                    |\n| `containerStyle` | `React.CSSProperties` | `{}`          | Custom styles for the container.                            |\n| `rowStyle`       | `React.CSSProperties` | `{}`          | Custom styles for the individual rows.                      |\n| `primaryColor`   | `string`              | `\"#e2e2e2\"`   | Primary color used for the loading animation.               |\n| `secondaryColor` | `string`              | `\"#c8c8c8\"`   | Secondary color used for the loading animation.             |\n| `align`          | `Align`               | `Align.LEFT`  | Alignment of the animated rows (`LEFT`, `CENTER`, `RIGHT`). |\n\n## Examples\n\nThese examples cover the usage of various props to customize the Animate Load component.\n\n### Animation Effect\n\nThere are two animations effects that can be used:\n\n```tsx\nimport { AnimateLoad } from \"react-animate-load\";\n\n\u003cAnimateLoad animation=\"pulse\" /\u003e // Using the pulse animation\n\n\u003cAnimateLoad animation=\"wave\" /\u003e // Using the wave animation\n```\n\n![Animation Effect](assets/animation-effect.gif)\n\n### Number of rows\n\nYou can customize the number of animated rows using the numRows prop:\n\n```tsx\nimport { AnimateLoad } from \"react-animate-load\";\n\n\u003cAnimateLoad numRows={5} /\u003e // Displaying 5 animated rows\n\n\u003cAnimateLoad numRows={10} /\u003e // Displaying 10 animated rows\n```\n\n![Number of rows](assets/number-rows.png)\n\n### Gap between rows\n\nAdjust the gap between the rows using the gapRow prop:\n\n```tsx\nimport { AnimateLoad } from \"react-animate-load\";\n\n\u003cAnimateLoad gapRow=\"8px\" /\u003e // 8px gap between rows\n\n\u003cAnimateLoad gapRow=\"16px\" /\u003e // 16px gap between rows\n```\n\n![Gap between rows](assets/gap-rows.png)\n\n### Round corners\n\nControl whether the rows have rounded corners with the roundCorner prop:\n\n```tsx\nimport { AnimateLoad } from \"react-animate-load\";\n\n\u003cAnimateLoad roundCorner={true} /\u003e // Rows with rounded corners\n\n\u003cAnimateLoad roundCorner={false} /\u003e // Rows with sharp corners\n```\n\n![Round corners](assets/round-corners.png)\n\n### Customize rows width and height and align rows\n\nCustomize the dimensions and alignment of individual rows using the customRows and align props:\n\n```tsx\nimport { AnimateLoad, Align } from \"react-animate-load\";\n\nconst customRows = [\n  { index: 0, width: \"90%\" },\n  { index: 1, width: \"82%\", height: \"10px\" },\n  // no need to set the index 2 row, it will assume the default values (width: 100%, height: 100%)\n  { index: 3, height: \"20px\" },\n  { index: 4, width: \"95%\", height: \"30px\" },\n  { index: 5, width: \"50%\" },\n];\n\n\u003cAnimateLoad customRows={customRows} /\u003e // Custom width and height, aligned to left (default value)\n\n\u003cAnimateLoad customRows={customRows} align={Align.LEFT} /\u003e // Custom width and height, aligned to left\n\n\u003cAnimateLoad customRows={customRows} align={Align.CENTER} /\u003e // Custom width and height, aligned to center\n\n\u003cAnimateLoad customRows={customRows} align={Align.RIGHT} /\u003e // Custom width and height, aligned to right\n```\n\n![Custom rows](assets/custom-row.png)\n\n### Round component\n\nCreate a round loading placeholder with the round prop:\n\n```tsx\nimport { AnimateLoad } from \"react-animate-load\";\n\n\u003cAnimateLoad round={true} /\u003e // Round placeholder - the width and height of the parent should be equal\n\n\u003cAnimateLoad round={false} /\u003e // Regular placeholder\n```\n\n![Round component](assets/round.png)\n\n### Animation colors\n\nChange the primary and secondary colors of the animation with primaryColor and secondaryColor props:\n\n```tsx\nimport { AnimateLoad } from \"react-animate-load\";\n\n\u003cAnimateLoad primaryColor=\"#3498db\" secondaryColor=\"#c8c8c8\" /\u003e // Blue shades animation\n\n\u003cAnimateLoad primaryColor=\"#f39c12\" secondaryColor=\"#c8c8c8\" /\u003e // Orange shades animation\n```\n\n![Rows color](assets/colors.gif)\n\n### Override styles\n\n#### Container styles\n\nOverride the container’s styles using the containerStyle prop:\n\n```tsx\nimport { AnimateLoad } from \"react-animate-load\";\n\n\u003cAnimateLoad containerStyle={{ border: \"solid 1px\", padding: \"10px\" }} /\u003e; // Custom container styles\n```\n\n#### Row styles\n\nOverride the styles of individual rows using the rowStyle prop:\n\n```tsx\nimport { AnimateLoad } from \"react-animate-load\";\n\n\u003cAnimateLoad rowStyle={{ borderRadius: \"8px\", marginBottom: \"10px\" }} /\u003e; // Custom row styles\n```\n\n![Override styles](assets/override-styles.png)\n\n## Contributing\n\nContributions are welcome! See `CONTRIBUTING.md` to get started.\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE](https://github.com/tfmteixeira/react-animate-load?tab=MIT-1-ov-file) file for details.\n\n---\n\nHappy loading! 🎉\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftfmteixeira%2Freact-animate-load","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftfmteixeira%2Freact-animate-load","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftfmteixeira%2Freact-animate-load/lists"}