{"id":16078204,"url":"https://github.com/sletheren/react-spinners-loading","last_synced_at":"2025-03-18T05:31:25.780Z","repository":{"id":57345206,"uuid":"158270501","full_name":"Sletheren/react-spinners-loading","owner":"Sletheren","description":"A totally customizable component for loading spinners/animation for your react project, it can serve as document loader (full screen), specific block loading animation and more, it has presets and accept your own assets as spinners","archived":false,"fork":false,"pushed_at":"2019-01-02T15:12:10.000Z","size":259,"stargazers_count":8,"open_issues_count":2,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-16T17:25:12.327Z","etag":null,"topics":["component","loading","loading-spinner","react","reactjs","spinner","spinner-components"],"latest_commit_sha":null,"homepage":null,"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/Sletheren.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}},"created_at":"2018-11-19T18:14:57.000Z","updated_at":"2021-08-22T09:56:13.000Z","dependencies_parsed_at":"2022-08-26T06:21:43.794Z","dependency_job_id":null,"html_url":"https://github.com/Sletheren/react-spinners-loading","commit_stats":null,"previous_names":["sletheren/react-loading-spinners"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sletheren%2Freact-spinners-loading","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sletheren%2Freact-spinners-loading/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sletheren%2Freact-spinners-loading/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sletheren%2Freact-spinners-loading/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Sletheren","download_url":"https://codeload.github.com/Sletheren/react-spinners-loading/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244165005,"owners_count":20409026,"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","loading","loading-spinner","react","reactjs","spinner","spinner-components"],"created_at":"2024-10-09T10:09:04.124Z","updated_at":"2025-03-18T05:31:21.743Z","avatar_url":"https://github.com/Sletheren.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Loading Spinners [![Version](https://img.shields.io/npm/v/react-spinners-loading.svg)](https://www.npmjs.com/package/react-spinners-loading)\n\nA Highly Customizable React component to help you with loaders/spinners for specific part of your project or as a project loading, with built-in presets and the ability of using your own assets.\n## Online Demo\n\n![Screenshots](https://raw.githubusercontent.com/Sletheren/react-spinners-loading/master/examples/src/example.gif)\n\nYou can check out this little demo to get the feel of it: [Online demo](https://sletheren.github.io/react-spinners-loading/)\n\n## Get started\n\nIt's very easy to use the tool, follow the instructions\n\n### Add the package\n\nInstall the package using npm\n\n```\nnpm i react-spinners-loading \n```\n\n### Import the package into your react app\n\n```\nimport Loader from 'react-spinners-loading'\n```\n\n### Pass the configuration props:\nExample of the Configuraiton array:\n````js\n  \u003cLoader\n    text=\"Loader Text\"\n    animation=\"clock\"\n    width=\"250px\"\n    height=\"250px\"\n    color=\"#FFF\"\n    background=\"rgba(234, 12, 35, 0.7)\"\n  /\u003e\n````\nAnd that's pretty much it!\n\n#### Explanation of the different properties you can pass:\n\n| Name         | Type | Default | Description |\n| ------------ | ----------- | ----------- | ----------- |\n| text | String | 'Loading...' | Unique string that defines the element |\n| animation | String | null | One of the built-in presets [bar, circle, clock, dots, double-circle, drop, spinner] |\n| color | String | '#FFFFFF' | The color of the text/spinner in HEX,RGB or RGBa |\n| background | String | 'rgba(0, 0, 0, 0.7)' | The background color of the whole Loader in HEX,RGB or RGBa |\n| width | String | '100%' | The Width of the Loader in Px/rem/em/% |\n| height | String | '100%' | The Height of the Loader in Px/rem/em/% |\n| fullscreen | Boolean | false | If the Loader should be showed in full-screen (Width \u0026 Height shouldn't be specified) |\n| show | Boolean | true | To control if the Loader has to be shown or not |\n| imageUrl | String | null | The URL for the Loading animation (animation doesn't need to be specified) |\n| dismissible | Boolean | false | Showing a Closing button to close the Loader |\n\n\n### Enjoy :)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsletheren%2Freact-spinners-loading","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsletheren%2Freact-spinners-loading","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsletheren%2Freact-spinners-loading/lists"}