{"id":13554769,"url":"https://github.com/GriffinJohnston/ldrs","last_synced_at":"2025-04-03T07:32:46.938Z","repository":{"id":38980275,"uuid":"476341196","full_name":"GriffinJohnston/ldrs","owner":"GriffinJohnston","description":"Modern, tree-shakeable loaders \u0026 spinners. Made with CSS, HTML and SVG. https://uiball.com/ldrs","archived":false,"fork":false,"pushed_at":"2025-03-28T14:16:36.000Z","size":945,"stargazers_count":1983,"open_issues_count":1,"forks_count":66,"subscribers_count":6,"default_branch":"main","last_synced_at":"2025-04-02T15:52:20.626Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","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/GriffinJohnston.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,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-03-31T14:25:51.000Z","updated_at":"2025-04-02T06:23:25.000Z","dependencies_parsed_at":"2023-12-13T21:11:13.357Z","dependency_job_id":"1ab399cf-21e2-4342-9ccf-9d695e6d9e56","html_url":"https://github.com/GriffinJohnston/ldrs","commit_stats":{"total_commits":38,"total_committers":2,"mean_commits":19.0,"dds":0.02631578947368418,"last_synced_commit":"83eaafc15efb26a59119c2fd174ee7d6f846a27d"},"previous_names":["griffinjohnston/ldrs","griffinjohnston/uiball-loaders"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GriffinJohnston%2Fldrs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GriffinJohnston%2Fldrs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GriffinJohnston%2Fldrs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GriffinJohnston%2Fldrs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/GriffinJohnston","download_url":"https://codeload.github.com/GriffinJohnston/ldrs/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246956776,"owners_count":20860497,"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-08-01T12:02:54.513Z","updated_at":"2025-04-03T07:32:46.924Z","avatar_url":"https://github.com/GriffinJohnston.png","language":"TypeScript","funding_links":[],"categories":["TypeScript","Real World"],"sub_categories":["Component Libraries"],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003ca href=\"https://uiball.com/ldrs\"\u003e\n    \u003cpicture\u003e\n      \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"thumbnail-dark.png\"\u003e\n      \u003csource media=\"(prefers-color-scheme: light)\" srcset=\"thumbnail-light.png\"\u003e\n      \u003cimg src=\"thumbnail-dark.png\" alt=\"U-I Ball LDRS\" \n      width=\"100%\"\n      height=\"auto\"\u003e\n    \u003c/picture\u003e\n  \u003c/a\u003e\n\u003c/div\u003e\n\n# LDRS\n\nLightweight loaders \u0026 spinners for your next web project. Available as Web and React components.\n\n- **44 types** : Unique enough to be interesting; simple enough to use in real-world projects\n- **Universal** : Use with React, Vue, Svelte, Solid, plain HTML...\n- **Customizable** : Set the size, color, stroke width, and animation speed to match your design\n- **Tiny** : No frameworks. No bloat. Dues-paying member of the iddy biddy bundle committee\n- **Vanilla** : Only want the HTML \u0026 CSS? Just select a loader on [the website](https://uiball.com/ldrs) and go to `Source` -\u003e `HTML \u0026 CSS`\n- **Typed** : No one likes a squiggly red underline\n- **No gifs** : Built with HTML, CSS and some lightweight SVG\n- **Zero dependencies** : Zero worries\n\n➠ Visit the [🌐 Website](https://uiball.com/ldrs) to see them all in action.\n\n## Installation\n\n**NPM**\n\n```jsx\nnpm install ldrs\n```\n\n**Yarn**\n\n```jsx\nyarn add ldrs\n```\n\n## React\n\nReact exports have been added to LDRS as of `v1.1.3`. They can be imported from `ldrs/react` and use PascalCase. Attributes are identical to the web components except they are snakeCase. When using the React components, CSS must be imported separately from `ldrs/react/[ComponentName].css`\n\n```jsx\nimport { Ring } from 'ldrs/react'\nimport 'ldrs/react/Ring.css'\n\n\u003cRing size={50} speed={1.5} bgOpacity={0.25} /\u003e\n```\n\n## Web Components\n\nWeb components need to be registered or \"defined\" to work. Until registration they're just empty HTML elements that don't do anything. For convenience, LDRS come in two varieties: auto-defining and manually defined. Auto-defining elements are released as individual .js files that register themselves on import. Manually defined elements are named exports that come with a `register()` method. \n\nThe full list of loaders can be found on [the website](https://uiball.com/ldrs).\n\n```js\n// Auto-defining\nimport 'ldrs/ring'\n\n// Manually defined\nimport { ring } from 'ldrs'\nring.register()\n```\n\nYou can rename your loader by passing a string to the `register()` method. Note that custom element names must contain a dash `-`.\n\n```js\nimport { ring } from 'ldrs'\nring.register('my-precious')\n```\n\n```html\n\u003cmy-precious color=\"black\"\u003e\u003c/my-precious\u003e\n```\n\nHere's a very simple example of using an auto-defining loader in a client-rendered React SPA:\n\n```jsx\nimport 'ldrs/helix'\n\nexport default function PageSection({ isLoading }) {\n  return (\n    \u003cdiv aria-live=\"polite\" aria-busy={isLoading}\u003e\n      {isLoading \u0026\u0026 \u003cl-helix\u003e\u003c/l-helix\u003e}\n    \u003c/div\u003e\n  )\n}\n```\n\n## Frameworks\n\nWeb components can only be run in a client-side environment, so they need to be excluded from SSR.\n\n[📖 Nuxt.js guide →](/framework-guides.md#nuxtjs)  \n[📖 Astro guide →](/framework-guides.md#astro)  \n\n## Options\n\n_Each loader has different defaults. You can see them on [the website](https://uiball.com/ldrs). Click on an individual loader and open the \"source\" sidebar._\n\n### `size: number | string`\n\nThe size of the loader. Specifically, this defines the largest dimension (height or width) in pixels.\n\n```jsx\n\u003cl-trefoil size=\"35\" /\u003e\n```\n\n### `color: string`\n\nAny valid CSS color value is accepted, so `#000000`, `red`, `hsla(13, 68%, 63%, .7)`, and `var(--my-custom-color)` are all a-okay.\n\n```jsx\n\u003cl-trefoil color=\"papayawhip\" /\u003e\n```\n\n### `speed: number | string`\n\nThe speed of the animation. Each loader uses this number a little differently (individual parts of a given loader might have different timings), but in general this number represents the duration of a single full animation loop in seconds, so smaller = faster. If you set speed to `0` or `Infinity` it will pause the animation.\n\n```jsx\n\u003cl-trefoil speed=\"1.75\" /\u003e\n```\n\n### `stroke: number | string`\n\nThe width / stroke in pixels of line-based loaders like `\u003cl-waveform /\u003e` or `\u003cl-zoomies /\u003e`.\n\n```jsx\n\u003cl-trefoil stroke=\"3.5\" /\u003e\n```\n\n### `stroke-length: number | string`\n\nThe length of the animated element of track-based loaders like `\u003cl-ring-2 /\u003e` or `\u003cl-infinity /\u003e`. Expressed as a fraction of total. Accepts a value from 0 to 1 (for example `.1` or `0.14159`).\n\n```jsx\n\u003cl-trefoil stroke-length=\".15\" /\u003e\n```\n\n### `bg-opacity: number | string`\n\nThe opacity of background elements in loaders like `\u003cl-reuleaux /\u003e` or `\u003cl-hourglass /\u003e`. Accepts a value from 0 to 1 (for example `.1` or `0.618`).\n\n```jsx\n\u003cl-trefoil bg-opacity=\".1\" /\u003e\n```\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FGriffinJohnston%2Fldrs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FGriffinJohnston%2Fldrs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FGriffinJohnston%2Fldrs/lists"}