{"id":27722590,"url":"https://github.com/umerfarok/vibrant-loaders","last_synced_at":"2025-08-16T10:48:17.072Z","repository":{"id":250622989,"uuid":"834970648","full_name":"umerfarok/vibrant-loaders","owner":"umerfarok","description":"A versatile collection of unique orange-themed loaders designed for shopping websites and e-commerce applications. These loaders are compatible with React, Next.js, and other JavaScript frameworks.","archived":false,"fork":false,"pushed_at":"2024-08-02T14:04:36.000Z","size":1387,"stargazers_count":5,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-27T12:26:42.734Z","etag":null,"topics":["loaders","loaders-design","loading","loading-animations","react","shoping-loaders"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/vibrant-loaders","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/umerfarok.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","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":"2024-07-28T21:26:05.000Z","updated_at":"2024-09-26T13:29:20.000Z","dependencies_parsed_at":"2024-08-02T15:53:16.258Z","dependency_job_id":null,"html_url":"https://github.com/umerfarok/vibrant-loaders","commit_stats":null,"previous_names":["umerfarok/vibrant-loaders"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/umerfarok%2Fvibrant-loaders","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/umerfarok%2Fvibrant-loaders/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/umerfarok%2Fvibrant-loaders/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/umerfarok%2Fvibrant-loaders/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/umerfarok","download_url":"https://codeload.github.com/umerfarok/vibrant-loaders/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251136839,"owners_count":21541634,"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":["loaders","loaders-design","loading","loading-animations","react","shoping-loaders"],"created_at":"2025-04-27T12:26:55.163Z","updated_at":"2025-04-27T12:26:55.858Z","avatar_url":"https://github.com/umerfarok.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Vibrant Loaders\r\n\r\nA versatile collection of unique orange-themed loaders designed for shopping websites and e-commerce applications. These loaders are compatible with React, Next.js, and other JavaScript frameworks.\r\nA samlme useages for the loaders. https://loaders-showcase.vercel.app/\r\n\r\n## Table of Contents\r\n\r\n- [Vibrant Loaders](#vibrant-loaders)\r\n  - [Table of Contents](#table-of-contents)\r\n  - [Installation](#installation)\r\n  - [Usage](#usage)\r\n    - [Mini Loaders](#mini-loaders)\r\n  - [Loader Samples](#loader-samples)\r\n    - [Atom Loader](#atom-loader)\r\n    - [Bouncing Dots Loader](#bouncing-dots-loader)\r\n    - [Galaxy Loader](#galaxy-loader)\r\n    - [Mini Flip Loader](#mini-flip-loader)\r\n    - [Mini Pulse Loader](#mini-pulse-loader)\r\n    - [Mini Ripple Loader](#mini-ripple-loader)\r\n    - [Mini Spinner Loader](#mini-spinner-loader)\r\n    - [Pulse Grid Loader](#pulse-grid-loader)\r\n    - [Rotating Squares](#rotating-squares)\r\n    - [Wave Loader](#wave-loader)\r\n    - [ShopingLoader](#shopingloader)\r\n\r\n## Installation\r\n\r\nInstall the package using npm:\r\n\r\n```bash\r\nnpm install vibrant-loaders\r\n```\r\n## Usage\r\n```jsx\r\nimport { AtomLoader, GalaxyLoader, WaveLoader } from 'vibrant-loaders';\r\n\r\nfunction App() {\r\n  return (\r\n    \u003cdiv\u003e\r\n      \u003cAtomLoader size={32} coreColor=\"red-500\" electronColor=\"pink-300\" /\u003e\r\n      \u003cGalaxyLoader size={100} armColor=\"indigo-600\" coreColor=\"yellow-400\" /\u003e\r\n      \u003cWaveLoader size={64} waveColor=\"teal-400\" particleColor=\"teal-100\" /\u003e\r\n    \u003c/div\u003e\r\n  );\r\n}\r\n```\r\n### Mini Loaders\r\nThese mini loaders are designed to be compact and easily integrated into various parts of a UI. They can be used in buttons, forms, or any other small UI elements where you need to indicate loading or processing.\r\n\r\nTo use these mini loaders, you can import them from your package and use them in your React components like this:\r\n\r\n```jsx\r\nimport {\r\n  MiniPulseLoader,\r\n  MiniDotsLoader,\r\n  MiniSpinnerLoader,\r\n  MiniFlipLoader,\r\n  MiniHourglassLoader,\r\n  MiniRippleLoader\r\n} from 'vibrant-loaders';\r\n\r\nfunction App() {\r\n  return (\r\n    \u003cdiv className=\"flex space-x-4 items-center\"\u003e\r\n      \u003cbutton className=\"px-4 py-2 bg-blue-500 text-white rounded\"\u003e\r\n        Submit \u003cMiniDotsLoader size={16} color=\"white\" /\u003e\r\n      \u003c/button\u003e\r\n      \u003cdiv\u003eLoading... \u003cMiniSpinnerLoader size={20} color=\"blue-600\" thickness={3} /\u003e\u003c/div\u003e\r\n      \u003cdiv\u003e\u003cMiniPulseLoader size={24} color=\"green-500\" /\u003e\u003c/div\u003e\r\n      \u003cdiv\u003e\u003cMiniFlipLoader size={28} frontColor=\"purple-500\" backColor=\"purple-300\" /\u003e\u003c/div\u003e\r\n      \u003cdiv\u003e\u003cMiniHourglassLoader size={24} color=\"orange-500\" /\u003e\u003c/div\u003e\r\n      \u003cdiv\u003e\u003cMiniRippleLoader size={32} color=\"red-500\" /\u003e\u003c/div\u003e\r\n    \u003c/div\u003e\r\n  );\r\n}\r\n```\r\n\r\n\r\n\r\n## Loader Samples\r\n\r\n### Atom Loader\r\n![Atom Loader](./LodersSamples/AtomLoader.gif)\r\n\r\n### Bouncing Dots Loader\r\n![Bouncing Dots Loader](./LodersSamples/BouncingDots.gif)\r\n\r\n### Galaxy Loader\r\n![Galaxy Loader](./LodersSamples/GalaxyLoader.gif)\r\n\r\n### Mini Flip Loader\r\n![Mini Flip Loader](./LodersSamples/MiniFlipLoader.gif)\r\n\r\n### Mini Pulse Loader\r\n![Mini Pulse Loader](./LodersSamples/MiniPulseLoader.gif)\r\n\r\n### Mini Ripple Loader\r\n![Mini Ripple Loader](./LodersSamples/MiniRippleLoader.gif)\r\n\r\n### Mini Spinner Loader\r\n![Mini Spinner Loader](./LodersSamples/MiniSpinnerLoade.gif)\r\n\r\n### Pulse Grid Loader\r\n![Pulse Grid Loader](./LodersSamples/PulseGridLoader.gif)\r\n\r\n### Rotating Squares\r\n![Rotating Squares](./LodersSamples/RotatingSquares.gif)\r\n\r\n### Wave Loader\r\n![Wave Loader](./LodersSamples/WaveLoader.gif)\r\n\r\n### ShopingLoader\r\n![ShopingLoader](./LodersSamples/ShopingLoader.gif)\r\n\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fumerfarok%2Fvibrant-loaders","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fumerfarok%2Fvibrant-loaders","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fumerfarok%2Fvibrant-loaders/lists"}