{"id":13456933,"url":"https://github.com/jonjaques/react-loaders","last_synced_at":"2025-12-14T21:36:13.046Z","repository":{"id":29321985,"uuid":"32855503","full_name":"jonjaques/react-loaders","owner":"jonjaques","description":"Lightweight wrapper around Loaders.css.","archived":false,"fork":false,"pushed_at":"2022-04-01T04:38:28.000Z","size":1083,"stargazers_count":374,"open_issues_count":4,"forks_count":44,"subscribers_count":9,"default_branch":"master","last_synced_at":"2024-04-14T04:00:03.672Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://jonjaques.github.com/react-loaders","language":"CSS","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/jonjaques.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":"2015-03-25T09:41:31.000Z","updated_at":"2024-04-14T04:00:03.673Z","dependencies_parsed_at":"2022-09-26T22:10:47.127Z","dependency_job_id":null,"html_url":"https://github.com/jonjaques/react-loaders","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jonjaques%2Freact-loaders","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jonjaques%2Freact-loaders/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jonjaques%2Freact-loaders/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jonjaques%2Freact-loaders/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jonjaques","download_url":"https://codeload.github.com/jonjaques/react-loaders/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245260992,"owners_count":20586508,"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-07-31T08:01:30.393Z","updated_at":"2025-12-14T21:36:13.001Z","avatar_url":"https://github.com/jonjaques.png","language":"CSS","readme":"# React Loaders\n\nLightweight wrapper around [Loaders.css](https://github.com/ConnorAtherton/loaders.css).\n\n[Demo](http://jonjaques.github.io/react-loaders)\n\n## Install\n\n```\nnpm install --save react-loaders loaders.css\n```\n\n\n## Usage\n\nRequire the component.\n\n```js\nvar Loader = require('react-loaders').Loader;\n// also available as `default`\n\nfunction renderLoader() {\n  return \u003cLoader type=\"line-scale\" active /\u003e\n}\n\n```\n\n### Props\n\n```js\nstatic propTypes = {\n  type: PropTypes.string,\n  active: PropTypes.bool,\n  color: PropTypes.string,\n  innerClassName: PropTypes.string, // applied to the same div as .loader-inner.${type}\n   \t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t// useful for advanced styling\n  // className \u0026 style are implied\n};\n```\n\n#### Sizing\n**Note**: in ~2.x we had a size prop declared, but it never did anything so for 3.0 it has been removed. Why you ask? Well due to the way these are built by loaders.css, they are hardcoded to use specific pixel widths so sizing these natively would require rewriting that whole project.\n\n*Pro tip*: you can resize these by simply passing `style={{transform: 'scale(0.5)'}}`. \n\n### CSS\nImport any of the animations you want to use.\n\n```scss\n$primary-color: $my-brand-color;\n// How you import this will depend heavily on your build setup\n// If using webpack though, `~` refers to node_modules\n// @import '~loaders.css/src/animations/line-scale.scss'\n@import 'loaders.css/src/animations/line-scale.scss'\n\n.loader-hidden {\n  display: none;\n}\n.loader-active {\n  display: block;\n}\n```\n\n**If `@import`ing with Sass, make you use something like [autoprefixer](https://github.com/postcss/autoprefixer) to add backwards compatibility.**\n","funding_links":[],"categories":["UI Components","Demos","\u003csummary\u003eUI Components\u003c/summary\u003e","CSS"],"sub_categories":["Loader"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjonjaques%2Freact-loaders","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjonjaques%2Freact-loaders","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjonjaques%2Freact-loaders/lists"}