{"id":14985492,"url":"https://github.com/summer-andy/react-loading","last_synced_at":"2025-05-07T03:30:40.001Z","repository":{"id":39320098,"uuid":"219778203","full_name":"Summer-andy/react-loading","owner":"Summer-andy","description":"Build a smooth and lightweight react component loading with css 🎉 .","archived":true,"fork":false,"pushed_at":"2023-01-05T13:52:54.000Z","size":6842,"stargazers_count":341,"open_issues_count":27,"forks_count":40,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-03T14:18:44.825Z","etag":null,"topics":["component","demand","react","storybook","styled-components"],"latest_commit_sha":null,"homepage":"http://139.196.82.33:8080/iframe.html?id=demo--demo","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/Summer-andy.png","metadata":{"files":{"readme":"README-zh-Hans.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":"2019-11-05T15:27:20.000Z","updated_at":"2025-02-03T15:08:17.000Z","dependencies_parsed_at":"2022-09-13T12:42:48.179Z","dependency_job_id":null,"html_url":"https://github.com/Summer-andy/react-loading","commit_stats":null,"previous_names":[],"tags_count":38,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Summer-andy%2Freact-loading","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Summer-andy%2Freact-loading/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Summer-andy%2Freact-loading/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Summer-andy%2Freact-loading/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Summer-andy","download_url":"https://codeload.github.com/Summer-andy/react-loading/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252806343,"owners_count":21807189,"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","demand","react","storybook","styled-components"],"created_at":"2024-09-24T14:11:05.250Z","updated_at":"2025-05-07T03:30:39.566Z","avatar_url":"https://github.com/Summer-andy.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/sixiaodong123/react-loading\"\u003e\n    \u003cimg width=\"200\" src=\"https://github.com/sixiaodong123/react-loading/blob/master/logo.png\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003ch1 align=\"center\"\u003e一个基于 React 的 Loading 动画组件库\u003c/h1\u003e\n\u003cdiv align=\"center\"\u003e\n\n[![npm version](https://img.shields.io/npm/v/react-loading)](https://www.npmjs.com/package/react-loadingg) [![](https://img.shields.io/github/license/sixiaodong123/react-loading)](https://github.com/sixiaodong123/react-loading/blob/master/LICENSE) [![](https://img.shields.io/npm/dm/react-loadingg)](https://www.npmjs.com/package/react-loadingg)\n\n[English](https://github.com/sixiaodong123/react-loading) \u0026#124; 简体中文\n\n\u003c/div\u003e\n\n## 介绍\n\n`React-Loading`是一个基于 React 的 Loading 动画组件库，拥有许多精致且漂亮的 loading 组件，在你的项目中适当的地方与时刻比如页面局部处于等待异步数据或正在渲染过程时给予加载动效提示，会有效缓解用户的焦虑。本组件库支持按需加载，那么，现在就挑选一个喜欢的 Loading 组件，丰富你的项目吧～\n\n🎉 [查看 demo](http://139.196.82.33:8080/iframe.html?id=demo--demo)\n\n## 注意事项\n  \n  在1.7.4-alpha.2版本之后使用了typescript重构了项目。\n\n## 快速使用\n\n#### 🛠 安装\n\n```\nnpm install react-loadingg\n```\n\n#### 📦 使用\n\n```\nimport { BoxLoading } from 'react-loadingg';\n\n\u003cBoxLoading /\u003e;\n```\n\n## 组件相关\n\n#### 📕 API\n\n| 参数          |  说明        | 类型          | 默认值  |\n| ------------ | ------------ | ------------ | ------------ |\n| color  | 设置颜色，支持16进制与RGB | string  |  '#00adb5' |\n| speed  | 设置动画速度  | number(秒)  | - |\n| size   | 设置组件大小，可选值为 `small` `default` `large`  | string  |  'default' |\n| style  | 设置组件样式  | Object  |  - |\n\n#### 📝 组件列表\n\n| 组件                 | color | speed | size  | style | \n| -------------------- | ----- | ----- | ----- | ----- | \n| BabelLoading         | ✅    | ✅    | ✅   | ✅    |\n| BlockLoading         | ✅    | ✅    | ✅   | ✅    | \n| BlockReserveLoading  | ✅    | ✅    | ✅   | ✅    | \n| BoxLoading           | ✅    | ✅    | ✅   | ✅    | \n| CircleLoading        | ✅    | ✅    | ✅   | ✅    | \n| CircleToBlockLoading | ✅    | ✅    | ✅   | ✅    | \n| CommonLoading        | ✅    | ✅    | ✅   | ✅    | \n| DisappearedLoading   | ✅    | ✅    | ✅   | ✅    | \n| LoopCircleLoading    | ✅    | ✅    | ✅   | ✅    | \n| NineCellLoading      | ✅    | ✅    | ✅   | ✅    | \n| TouchBallLoading     | ✅    | ✅    | ✅   | ✅    | \n| TransverseLoading    | ✅    | ✅    | ✅   | ✅    | \n| WaveLoading          | ✅    | ✅    | ✅   | ✅    | \n| WaveTopBottomLoading | ✅    | ✅    | ✅   | ✅    | \n| WindMillLoading      | ✅    | ✅    | ✅   | ✅    | \n| JumpCircleLoading    | ✅    | ✅    | ✅   | ✅    | \n| MeteorRainLoading    | ✅    | ✅    | ✅   | ✅    | \n| RotateCircleLoading  | ✅    | ✅    | ✅   | ✅    | \n| StickyBallLoading    | ✅    | ✅    | ✅   | ✅    | \n| SemipolarLoading     | ✅    | ✅    | ✅   | ✅    | \n| SolarSystemLoading   | ✅    | ✅    | ✅   | ✅    |\n| LadderLoading        | ✅    | ✅    | ✅   | ✅    |\n| HeartBoomLoading     | ✅    | ✅    | ✅   | ✅    |\n| RollBoxLoading       | ✅    | ✅    | ✅   | ✅    |\n| RectGraduallyShowLoading   | ✅    | ✅    | ✅   | ✅    |\n| PointSpreadLoading   | ✅    | ✅    | ✅   | ✅    |\n| ThreeHorseLoading   | ✅    | ✅    | ✅   | ✅    |\n| PassThrouthLoading   | ✅    | ✅    | ✅   | ✅    |\n| CoffeeLoading   | ✅    | ✅    | ✅   | ✅    |\n| BatteryLoading   | ✅    | ✅    | ✅   | ✅    |\n| DiamonLoading   | ✅    | ✅    |  🔨  | ✅    |\n| EatLoading   | ✅    | ✅    |  🔨  | ✅    |\n#### ⌨️ 组件开发\n\n首次运行项目\n```bash\n$ git clone https://github.com/sixiaodong123/react-loading\n$ npm run dev\n```\n\n`P.S.`: 若启动不成功，请先安装`yarn`\n```bash\nnpm install -g yarn\n```\n\n二次项目运行\n\n```bash\nnpm run storybook\n```\n\n#### 🔨 组件打包\n\n```bash\n$ npm run build\n```\n\n#### 🎉 组件发布\n\n```bash\n$ npm run release\n```\n\n#### 🤝 组件提交规范\n\n- perf: 优化相关，比如提升性能、体验\n- feat: 新功能(feature)\n- fix: 修补 bug\n- docs: 文档(documentation)\n- style: 格式(不影响代码运行的变动)\n- refactor: 重构(即不是新增功能，也不是修改 bug 的代码变动)\n- test: 增加测试\n- chore: 构建过程或辅助工具的变动\n- upgrade: 第三方库升级\n- revert: 回滚\n- scope: commit 影响的范围, 比如: route, component, utils, build...\n- merge: Merge branch ? of ?.\n\n#### ❤️ 组件分支管理\n\n- 模块功能开发(feature/xxx)\n- Bug 修改(bug/xxx)\n\n#### FAQ\n##### 🛎 我只想用一个```BabelLoading```，但似乎我必须 import 整个 react-loadingg:\n##### 试试[react-loading-demand](https://github.com/sixiaodong123/react-loading-demand),或者用下面这种方式来按需加载\n\n```\nimport BabelLoading from 'react-loadingg/lib/BabelLoading'\n```\n  \n##### 🛎 组件默认完全居中, 如果你想修改组件的样式,那么组件默认的完全居中的样式会被覆盖。\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsummer-andy%2Freact-loading","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsummer-andy%2Freact-loading","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsummer-andy%2Freact-loading/lists"}