{"id":15636444,"url":"https://github.com/huozhi/respinner","last_synced_at":"2025-05-16T15:09:27.455Z","repository":{"id":11464188,"uuid":"69757325","full_name":"huozhi/respinner","owner":"huozhi","description":"Pretty and customizable svg spinners for React.js","archived":false,"fork":false,"pushed_at":"2024-10-18T19:32:18.000Z","size":1146,"stargazers_count":142,"open_issues_count":0,"forks_count":10,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-04-12T14:16:05.412Z","etag":null,"topics":["loading","loading-animations","loading-spinner","pure-javascript","react","spinner","svg"],"latest_commit_sha":null,"homepage":"https://respinner.vercel.app","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/huozhi.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2016-10-01T18:56:21.000Z","updated_at":"2025-03-24T05:23:16.000Z","dependencies_parsed_at":"2024-01-18T12:37:44.792Z","dependency_job_id":"ceebf47e-d5b1-4b0c-a3bf-75a456ce80ef","html_url":"https://github.com/huozhi/respinner","commit_stats":{"total_commits":123,"total_committers":3,"mean_commits":41.0,"dds":0.08130081300813008,"last_synced_commit":"22d3bc7f93c1a0dfa94fa89297854199be9645d8"},"previous_names":[],"tags_count":31,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/huozhi%2Frespinner","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/huozhi%2Frespinner/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/huozhi%2Frespinner/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/huozhi%2Frespinner/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/huozhi","download_url":"https://codeload.github.com/huozhi/respinner/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254553958,"owners_count":22090417,"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":["loading","loading-animations","loading-spinner","pure-javascript","react","spinner","svg"],"created_at":"2024-10-03T11:04:02.228Z","updated_at":"2025-05-16T15:09:22.408Z","avatar_url":"https://github.com/huozhi.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Respinner\n![npm-version](https://img.shields.io/npm/v/respinner.svg?style=flat-square)\n\n\u003e react components for spinners or loaders. Each loader was combined css animation and render dom as svg.\neasily controlled by react porps.\n\nYou could change the count of spinner's children by props `count`, also the `color` of themselves. All of them built with SVG, so you can easily scale them with `width` and `height`.\n\n### Examples\n\n![demo](https://raw.githubusercontent.com/huozhi/respinner/56c645bffed017c785e82c8fc1e3336f7dbe5f6b/docs/public/respinner.gif)\n\nSee more details in `demo` directory or visit [website](https://respinner.vercel.app/)\n\n### Usage\n\n```sh\nnpm install --save respinner\n```\n\nJust import it when use with react. Issues go to [issues](https://github.com/huozhi/respinner/issues).\n\n#### Basic\n\n```tsx\nimport React from 'react'\nimport {\n  BeatLoading, BounceLoading, CircularLoading,\n  ClockLoading, RotateLoading, SpinLoading,\n  WaveLoading, DashLoading, CopperLoading\n} from 'respinner'\n\nfunction LoadingComponents() {\n  \u003cdiv className=\"spinners\"\u003e\n    \u003cSpinLoading fill=\"#777\" borderRadius={4} count={12} /\u003e // use with customized props\n    \u003cCircularLoading /\u003e // or just use with default props\n  \u003c/div\u003e\n}\n```\n\n#### Use with SVG `use`\n\n```tsx\n// pre-define a spinner\n\u003cSpinLoading borderRadius={2} count={10} id=\"spin\" /\u003e\n\n// reuse them\n\u003csvg width=\"40\"\u003e\u003cuse href=\"#spin\" fill=\"#fff\" /\u003e\u003c/svg\u003e\n\u003csvg width=\"40\"\u003e\u003cuse href=\"#spin\" fill=\"#fff\" /\u003e\u003c/svg\u003e\n```\n\n### API\n\nAny SVG props could be used in these components. The following are the default props for these components:\n#### 1. BeatLoading\n\n- `gap`: `6`\n- `size`: `8`\n- `count`: `6`\n- `duration`: `0.8`\n\n#### 2. CircularLoading\n\n- `size`: `40`\n- `strokeWidth`: `4`\n- `linecap`: `'round'`\n\n#### 3. BounceLoading\n\n- `gap`: `6`\n- `count`: `4`\n- `barWidth`: `4`\n- `barHeight`: `16`\n- `duration`: `0.8`\n\n#### 4. RotateLoading\n\n- `size`: `40`\n- `opacity`: `0.2`\n- `strokeWidth`: `4`\n\n#### 5. SpinLoading\n\n- `size`: `40`\n- `count`: `8`\n- `barWidth`: `4`\n- `duration`: `1`\n- `barHeight`: `10`\n- `borderRadius`: `1`\n\n#### 6. WaveLoading\n\n- `size`: `40`\n- `count`: `3`\n- `duration`: `1.5`\n- `strokeWidth`: `2`\n\n### 7. ClockLoading\n\n- `size`: `40`\n- `duration`: `2`\n- `strokeWidth`: `2`\n\n### 8. DashLoading\n\n- `size`: `40`\n- `duration`: `1.8`\n- `strokeWidth`: `4`\n\n### 9. CopperLoading\n\n- `size`: `40`\n- `strokeWidth`: `4`\n\n### Development\n\n```sh\npnpm install\npnpm dev\n\n# see demo in http://localhost:3000\n```\n\n### Build\n\n```sh\npnpm run build # build lib\npnpm run build:docs # build docs\n```\n\n### License\n\nMIT","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhuozhi%2Frespinner","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhuozhi%2Frespinner","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhuozhi%2Frespinner/lists"}