{"id":15312874,"url":"https://github.com/saravieira/styled-loaders","last_synced_at":"2025-05-07T19:04:39.207Z","repository":{"id":79211309,"uuid":"99621228","full_name":"SaraVieira/styled-loaders","owner":"SaraVieira","description":"Loaders Built with Preact and Styled Components","archived":false,"fork":false,"pushed_at":"2020-10-02T11:19:26.000Z","size":543,"stargazers_count":208,"open_issues_count":2,"forks_count":16,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-03-31T13:05:12.002Z","etag":null,"topics":["javascript","preact","styled-components"],"latest_commit_sha":null,"homepage":"https://styled-loaders.now.sh/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/SaraVieira.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,"governance":null,"roadmap":null,"authors":null}},"created_at":"2017-08-07T21:16:47.000Z","updated_at":"2024-02-13T15:38:29.000Z","dependencies_parsed_at":"2023-02-27T07:16:59.502Z","dependency_job_id":null,"html_url":"https://github.com/SaraVieira/styled-loaders","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SaraVieira%2Fstyled-loaders","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SaraVieira%2Fstyled-loaders/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SaraVieira%2Fstyled-loaders/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SaraVieira%2Fstyled-loaders/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SaraVieira","download_url":"https://codeload.github.com/SaraVieira/styled-loaders/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252940883,"owners_count":21828766,"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":["javascript","preact","styled-components"],"created_at":"2024-10-01T08:39:05.594Z","updated_at":"2025-05-07T19:04:39.096Z","avatar_url":"https://github.com/SaraVieira.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Styled Loaders\n\n\u003c!-- [![npm](https://img.shields.io/npm/dt/express.svg)](https://www.npmjs.com/package/styled-loaders) --\u003e\n[![Build Status](https://travis-ci.org/SaraVieira/styled-loaders.svg?branch=master)](https://travis-ci.org/SaraVieira/styled-loaders)\n[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg)](https://github.com/prettier/prettier)\n[![npm version](https://badge.fury.io/js/styled-loaders.svg)](https://npmjs.com/styled-loaders)\n\n\n\n## [Demo](https://styled-loaders.now.sh/)\n## [NPM](https://npmjs.com/styled-loaders)\n\nLoaders Built with Preact and Styled Components ready for your next project because no one deserves to have to writes loadings all the time.\n\nIf you are looking for a React version you can find one [here](https://github.com/saisandeepvaddi/styled-loaders-react) by the awesome [Sai Sandeep Vaddi](https://github.com/saisandeepvaddi)\n\nCredits and inspiration also belong heavily to the awesome work at  [SpinKit](http://tobiasahlin.com/spinkit/)\n\nAs I work on more projects over time more, more loaders will be added here.\n\n## Usage\n\n```\nnpm i styled-loaders\nor\nyarn add styled-loaders\n```\n\n```js\nimport { h } from 'preact'\nimport { Cube } from 'styled-loaders'\n\nconst Page = ({ loading }) =\u003e\n    \u003cmain\u003e\n        { loading ?\n            \u003cCube/\u003e\n            : 'Your Content'\n        }\n    \u003c/main\u003e\n\n```\n### With Props\n\n```js\nimport { h } from 'preact'\nimport { Block } from 'styled-loaders'\n\nconst Page = ({ loading }) =\u003e\n    \u003cmain\u003e\n        { loading ?\n            \u003cBlock color=\"red\" size=\"60px\" duration=\"5s\" /\u003e\n            : 'Your Content'\n        }\n    \u003c/main\u003e\n\n```\n\n### Loaders\n\n* Block\n![Block](https://media.giphy.com/media/l378dJlRt7fvGHyfK/giphy.gif)\n    * Props\n        * color\t- Background of the spinner default is #333\n        * duration - Animation duration default is 1.2s\n        * size - Size of the spinner default is 40px\n\n* Circular\n![Circular](https://media.giphy.com/media/l378y26cIAwgAVt4s/giphy.gif)\n    * Props\n        * color\t- Background of the spinner default is #333\n        * size - Size of the spinner default is 40px\n\n* Cube\n![Cube](https://media.giphy.com/media/3ov9jExQcWP6KTX1FS/giphy.gif)\n    * Props\n        * color\t- Background of the spinner default is #333\n        * size - Size of the spinner default is 40px\n        * cubeSize - Size of the each cube default is 15\n        * duration - Animation duration default is 1.2s\n\n* CubeGrid\n![CubeGrid](https://media.giphy.com/media/3ov9k9cASC7gCxpuLu/giphy.gif)\n    * Props\n        * color\t- Background of the spinner default is #333\n        * size - Size of the spinner default is 40px\n\n* DotScale\n![DotScale](https://media.giphy.com/media/l378c6525UOkzozVS/giphy.gif)\n    * Props\n        * color\t- Background of the spinner default is #333\n        * duration - Animation duration default is 1.2s\n        * size - Size of the spinner default is 40px\n        * dotSize - Size of the dots default is 18px\n\n* Pulsate\n![Pulsate](https://media.giphy.com/media/l378ar9YphdtfvkYg/giphy.gif)\n    * Props\n        * color\t- Background of the spinner default is #333\n        * duration - Animation duration default is 1.2s\n        * size - Size of the spinner default is 40px\n\n* RotateScale\n![RotateScale](https://media.giphy.com/media/l378kTgu2VkGC8kyk/giphy.gif)\n    * Props\n        * color\t- Background of the spinner default is #333\n        * duration - Animation duration default is 1.2s\n        * size - Size of the spinner default is 40px\n\n* Scale\n![Scale](https://media.giphy.com/media/l378mCuj3oh3HwMjm/giphy.gif)\n    * Props\n        * color\t- Background of the spinner default is #333\n        * duration - Animation duration default is 1.2s\n        * size - Size of the spinner default is 40px\n\n* Stretch\n![Stretch](https://media.giphy.com/media/3ov9jHpaSIMfW0p19m/giphy.gif)\n    * Props\n        * color\t- Background of the spinner default is #333\n        * duration - Animation duration default is 1.2s\n        * size - Size of the spinner default is 40px\n        * rectWidth - Width of each rectangle default is 6px\n\n\n## License\n\nMIT (2017 - Sara Vieira)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsaravieira%2Fstyled-loaders","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsaravieira%2Fstyled-loaders","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsaravieira%2Fstyled-loaders/lists"}