{"id":13421904,"url":"https://github.com/mhnpd/react-loader-spinner","last_synced_at":"2026-01-11T17:58:33.152Z","repository":{"id":27017350,"uuid":"112163978","full_name":"mhnpd/react-loader-spinner","owner":"mhnpd","description":"Collection sets of a spinners for async operations for ReactJS","archived":false,"fork":false,"pushed_at":"2024-04-04T14:40:09.000Z","size":6755,"stargazers_count":940,"open_issues_count":16,"forks_count":142,"subscribers_count":9,"default_branch":"master","last_synced_at":"2024-05-22T01:42:39.067Z","etag":null,"topics":["loader","react","react-component","react-spinners","spinner","spinner-animations","spinner-components","spinner-hint","spinner-icon","spinners","spinners-react","svg-loader","svg-spinner"],"latest_commit_sha":null,"homepage":"https://mhnpd.github.io/react-loader-spinner/","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/mhnpd.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"Contributing.md","funding":null,"license":"LICENSE","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":"2017-11-27T07:42:04.000Z","updated_at":"2024-06-18T11:19:34.830Z","dependencies_parsed_at":"2023-12-07T07:29:29.830Z","dependency_job_id":"9bd53d6d-8825-4d1b-98da-37b480fbb9f6","html_url":"https://github.com/mhnpd/react-loader-spinner","commit_stats":{"total_commits":301,"total_committers":35,"mean_commits":8.6,"dds":"0.21594684385382057","last_synced_commit":"4666190a00db1264535f57ee6843d318194cbf1a"},"previous_names":[],"tags_count":41,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mhnpd%2Freact-loader-spinner","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mhnpd%2Freact-loader-spinner/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mhnpd%2Freact-loader-spinner/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mhnpd%2Freact-loader-spinner/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mhnpd","download_url":"https://codeload.github.com/mhnpd/react-loader-spinner/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243719052,"owners_count":20336591,"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":["loader","react","react-component","react-spinners","spinner","spinner-animations","spinner-components","spinner-hint","spinner-icon","spinners","spinners-react","svg-loader","svg-spinner"],"created_at":"2024-07-30T23:00:33.657Z","updated_at":"2026-01-11T17:58:33.146Z","avatar_url":"https://github.com/mhnpd.png","language":"TypeScript","funding_links":[],"categories":["UI Components","TypeScript"],"sub_categories":["Loader"],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"/logo/logo.png\" alt=\"React Loader Spinner\" width=\"200\"/\u003e\n  \n  # React Loader Spinner\n  \n  [![npm version](https://badgen.net/npm/v/react-loader-spinner)](https://www.npmjs.com/package/react-loader-spinner)\n  [![downloads](https://badgen.net/npm/dt/react-loader-spinner)](https://www.npmjs.com/package/react-loader-spinner)\n  ![stars](https://badgen.net/github/stars/mhnpd/react-loader-spinner)\n  ![release](https://badgen.net/github/release/mhnpd/react-loader-spinner)\n  ![issues](https://badgen.net/github/open-issues/mhnpd/react-loader-spinner)\n  ![license](https://badgen.net/github/license/mhnpd/react-loader-spinner)\n\n**Simple, lightweight React SVG spinner components**  \n Perfect for async operations and loading states\n\n[📚 Documentation](https://mhnpd.github.io/react-loader-spinner/) • [🎨 Live Demo](https://mhnpd.github.io/react-loader-spinner/docs/category/components/) • [💻 CodeSandbox](https://codesandbox.io/p/sandbox/react-loader-spinner-86zm9s)\n\n\u003c/div\u003e\n\n---\n\n## ✨ Features\n\n- 🎯 **35+ Beautiful Spinners** - Wide variety of loading animations\n- 🎨 **Fully Customizable** - Colors, sizes, and styles\n- 📦 **Lightweight** - Zero dependencies (except React)\n- 🌲 **Tree-shakeable** - Import only what you need\n- 💪 **TypeScript** - Full type definitions included\n- ⚡ **React 17, 18 \u0026 19** - Compatible with all modern React versions\n- 🎭 **No CSS Required** - Pure SVG animations\n- ♿ **Accessible** - ARIA labels and semantic HTML\n\n## 📦 Installation\n\n```bash\nnpm install react-loader-spinner\n```\n\nOr using yarn:\n\n```bash\nyarn add react-loader-spinner\n```\n\n## 🚀 Quick Start\n\n```jsx\nimport { Audio } from 'react-loader-spinner'\n\nfunction App() {\n  return (\n    \u003cAudio\n      height=\"80\"\n      width=\"80\"\n      color=\"#4fa94d\"\n      ariaLabel=\"audio-loading\"\n      wrapperStyle={{}}\n      wrapperClass=\"wrapper-class\"\n      visible={true}\n    /\u003e\n  )\n}\n```\n\n## 📖 Documentation\n\nVisit our **[complete documentation](https://mhnpd.github.io/react-loader-spinner/)** for:\n\n- **[Getting Started Guide](https://mhnpd.github.io/react-loader-spinner/docs/intro)** - Installation and basic usage\n- **[All Components](https://mhnpd.github.io/react-loader-spinner/docs/category/components/)** - Browse all 35+ spinner components\n- **[API Reference](https://mhnpd.github.io/react-loader-spinner/docs/intro)** - Detailed prop documentation\n- **[Live Examples](https://mhnpd.github.io/react-loader-spinner/docs/category/components/)** - Interactive demos\n\n## 🎨 Available Spinners\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cb\u003eView all 35+ spinners\u003c/b\u003e\u003c/summary\u003e\n\n- Audio\n- Ball Triangle\n- Bars\n- Blocks\n- Circles\n- Circles With Bar\n- Circular Progress\n- Color Ring\n- Comment\n- Discuss\n- DNA\n- Falling Lines\n- Fidget Spinner\n- Grid\n- Hearts\n- Hourglass\n- Infinity Spin\n- Line Wave\n- Magnifying Glass\n- Mutating Dots\n- Oval\n- Progress Bar\n- Puff\n- Radio\n- Revolving Dot\n- Rings\n- Rotating Lines\n- Rotating Square\n- Rotating Triangles\n- Tail Spin\n- Three Circles\n- Three Dots\n- Triangle\n- Vortex\n- Watch\n\n\u003c/details\u003e\n\n## 💡 Usage Examples\n\n### Basic Usage\n\n```jsx\nimport { Oval } from 'react-loader-spinner'\n\n;\u003cOval\n  height={80}\n  width={80}\n  color=\"#4fa94d\"\n  visible={true}\n  ariaLabel=\"oval-loading\"\n  secondaryColor=\"#4fa94d\"\n  strokeWidth={2}\n  strokeWidthSecondary={2}\n/\u003e\n```\n\n### With Custom Styling\n\n```jsx\nimport { ThreeDots } from 'react-loader-spinner'\n\n;\u003cThreeDots\n  height=\"80\"\n  width=\"80\"\n  radius=\"9\"\n  color=\"#4fa94d\"\n  ariaLabel=\"three-dots-loading\"\n  wrapperStyle={{ margin: '20px' }}\n  wrapperClass=\"custom-loader\"\n  visible={true}\n/\u003e\n```\n\n### Conditional Rendering\n\n```jsx\nimport { TailSpin } from 'react-loader-spinner'\n\nfunction MyComponent() {\n  const [loading, setLoading] = useState(true)\n\n  return (\n    \u003cdiv\u003e\n      \u003cTailSpin\n        height=\"80\"\n        width=\"80\"\n        color=\"#4fa94d\"\n        ariaLabel=\"tail-spin-loading\"\n        visible={loading}\n      /\u003e\n    \u003c/div\u003e\n  )\n}\n```\n\n### Tree-shaking with Direct Imports\n\nFor optimal bundle size, import components directly:\n\n```jsx\n// Direct import (better for tree-shaking)\nimport { Audio } from 'react-loader-spinner/dist/esm/loader/audio'\n\n// Or use named imports (also tree-shakeable)\nimport { Audio, Oval, ThreeDots } from 'react-loader-spinner'\n```\n\n## 🎯 Common Props\n\nAll spinner components accept these common props:\n\n| Prop           | Type               | Default            | Description               |\n| -------------- | ------------------ | ------------------ | ------------------------- |\n| `height`       | `string \\| number` | `\"100\"`            | Height of the spinner     |\n| `width`        | `string \\| number` | `\"100\"`            | Width of the spinner      |\n| `color`        | `string`           | `\"#4fa94d\"`        | Primary color             |\n| `visible`      | `boolean`          | `true`             | Show/hide the spinner     |\n| `ariaLabel`    | `string`           | Component-specific | Accessibility label       |\n| `wrapperStyle` | `CSSProperties`    | `{}`               | Inline styles for wrapper |\n| `wrapperClass` | `string`           | `\"\"`               | CSS class for wrapper     |\n\n\u003e **Note:** Individual components may have additional specific props. Check the [documentation](https://mhnpd.github.io/react-loader-spinner/docs/category/components/) for each component.\n\n## 🔧 TypeScript Support\n\nThis package includes TypeScript definitions out of the box:\n\n```tsx\nimport { Audio } from 'react-loader-spinner'\nimport type { CSSProperties } from 'react'\n\nconst wrapperStyle: CSSProperties = {\n  display: 'flex',\n  justifyContent: 'center',\n}\n\n;\u003cAudio height=\"80\" width=\"80\" color=\"blue\" wrapperStyle={wrapperStyle} /\u003e\n```\n\n## 🌐 Browser Support\n\n- ✅ Chrome (latest)\n- ✅ Firefox (latest)\n- ✅ Safari (latest)\n- ✅ Edge (latest)\n- ✅ Modern mobile browsers\n\n## 🤝 Contributing\n\nWe welcome contributions! Please see our [Contributing Guide](./Contributing.md) for details.\n\n1. Fork the repository\n2. Create your feature branch (`git checkout -b feature/amazing-feature`)\n3. Commit your changes (`git commit -m 'Add some amazing feature'`)\n4. Push to the branch (`git push origin feature/amazing-feature`)\n5. Open a Pull Request\n\n## 📝 License\n\nMIT © [Mohan Upadhyay](https://mohanpd.com.np)\n\n## 🙏 Contributors\n\nThanks goes to these wonderful people:\n\n\u003ca href=\"https://github.com/mhnpd/react-loader-spinner/graphs/contributors\"\u003e\n  \u003cimg src=\"https://contrib.rocks/image?repo=mhnpd/react-loader-spinner\" /\u003e\n\u003c/a\u003e\n\n## 🔗 Links\n\n- [📚 Full Documentation](https://mhnpd.github.io/react-loader-spinner/)\n- [🐛 Report Bug](https://github.com/mhnpd/react-loader-spinner/issues)\n- [💡 Request Feature](https://github.com/mhnpd/react-loader-spinner/issues)\n- [📦 npm Package](https://www.npmjs.com/package/react-loader-spinner)\n\n---\n\n\u003cdiv align=\"center\"\u003e\n  Made with ❤️ by \u003ca href=\"https://mohanpd.com.np\"\u003eMohan Upadhyay\u003c/a\u003e\n  \n  ⭐ Star us on GitHub — it helps!\n\u003c/div\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmhnpd%2Freact-loader-spinner","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmhnpd%2Freact-loader-spinner","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmhnpd%2Freact-loader-spinner/lists"}