{"id":20237413,"url":"https://github.com/react-widget/spinner","last_synced_at":"2026-07-06T22:31:05.033Z","repository":{"id":57347713,"uuid":"278649148","full_name":"react-widget/spinner","owner":"react-widget","description":"https://react-widget.github.io/spinner/","archived":false,"fork":false,"pushed_at":"2020-07-12T15:06:06.000Z","size":238,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-19T17:03:02.989Z","etag":null,"topics":[],"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/react-widget.png","metadata":{"files":{"readme":"README.md","changelog":null,"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-07-10T14:05:06.000Z","updated_at":"2020-07-12T15:06:35.000Z","dependencies_parsed_at":"2022-08-28T01:40:21.576Z","dependency_job_id":null,"html_url":"https://github.com/react-widget/spinner","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-widget%2Fspinner","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-widget%2Fspinner/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-widget%2Fspinner/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-widget%2Fspinner/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/react-widget","download_url":"https://codeload.github.com/react-widget/spinner/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241681828,"owners_count":20002383,"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":[],"created_at":"2024-11-14T08:26:53.864Z","updated_at":"2025-10-25T23:50:30.859Z","avatar_url":"https://github.com/react-widget.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-widget-spinner\n\n\n## 安装\n\n```\nnpm install --save react-widget-spinner\n```\n\n## 使用\n\n[![Edit react-widget-spinner](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/white-fog-smdx6?fontsize=14\u0026hidenavigation=1\u0026theme=dark)\n\n```js\nimport Spinner from 'react-widget-spinner';\nimport 'react-widget-spinner/style';\n\n\u003cSpinner /\u003e;\n\n```\n\n### Interfaces\n\n```ts\ndeclare const sizeMap: {\n    small: number;\n    default: number;\n    medium: number;\n    large: number;\n};\nexport interface SpinnerProps extends React.HTMLAttributes\u003cany\u003e {\n    /** 样式前缀 */\n    prefixCls?: string;\n    /** 组件大小 */\n    size?: keyof typeof sizeMap | number;\n    /** TODO: 延迟显示加载效果的时间 ms */\n    delay?: number;\n    /** 圈圈周长：0-1 */\n    value?: number;\n    /** 风格，默认：primary */\n    type?: \"none\" | \"primary\" | \"success\" | \"warning\" | \"danger\";\n    /** 边框大小 */\n    strokeWidth?: number;\n    /** 是否为加载中状态 */\n    spinning?: boolean;\n    tagName?: React.ElementType;\n}\nexport declare const Spinner: React.FC\u003cSpinnerProps\u003e;\nexport default Spinner;\n\n```\n\n### defaultProps\n\n```js\n{\n\tprefixCls: \"rw-spinner\",\n\tsize: \"default\",\n\ttype: \"primary\",\n\tspinning: true,\n\ttagName: \"div\",\n\tvalue: 0.25,\n}\n```\n\n### 基础样式\n\n```css\n@keyframes rw-spinner-animation {\n    from {\n        transform: rotate(0deg);\n    }\n    to {\n        transform: rotate(360deg);\n    }\n}\n\n.rw-spinner {\n    display: none;\n    align-items: center;\n    justify-content: center;\n\n    overflow: visible;\n    vertical-align: middle;\n\n    transition: color 500ms linear;\n}\n\n.rw-spinner-spinning {\n    display: inline-flex;\n}\n\n.rw-spinner-primary {\n    color: #1890ff;\n}\n.rw-spinner-success {\n    color: #52c41a;\n}\n.rw-spinner-warning {\n    color: #faad14;\n}\n.rw-spinner-danger {\n    color: #ff4d4f;\n}\n\n.rw-spinner svg {\n    display: block;\n}\n\n.rw-spinner path {\n    fill-opacity: 0;\n}\n\n.rw-spinner-head {\n    transform-origin: center;\n    transition: stroke-dashoffset 200ms cubic-bezier(0.4, 1, 0.75, 0.9);\n    stroke-linecap: round;\n}\n\n.rw-spinner-track {\n    stroke: rgba(92, 112, 128, 0.2);\n}\n\n.rw-spinner .rw-spinner-animation {\n    animation: rw-spinner-animation 500ms linear infinite;\n}\n\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-widget%2Fspinner","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Freact-widget%2Fspinner","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-widget%2Fspinner/lists"}