How to use LDRS with Next.js server-side rendering?

Since web components aren't SSR-compatible, you must dynamically import them client-side or use React components with separate CSS imports. Refer to framework guides for specific workarounds.

LDRS vs react-spinners: which is better for React projects?

LDRS offers Web Components for multi-framework use and zero dependencies, while react-spinners is React-specific with integrated styling. Choose LDRS for flexibility and minimal bundle size, or react-spinners for simpler React integration.

Can I customize LDRS loader colors with CSS variables?

Yes, the 'color' prop accepts any valid CSS color value, including CSS custom properties like var(--my-color), allowing seamless integration with design systems as shown in the options.

How to speed up or slow down LDRS animations?

Use the 'speed' prop to control animation duration in seconds; smaller numbers make it faster, and setting it to 0 or Infinity pauses it, as explained in the README options.

Is LDRS compatible with SvelteKit?

Yes, but for SSR, you need to handle web components client-side. Import auto-defining loaders or register manually in onMount to avoid hydration issues.

What's the average file size per LDRS loader?

Loaders are built with lightweight SVG and CSS, so individual files are typically under 5KB, with no dependencies to bloat your bundle, aligning with its performance focus.

Open-Awesome

LDRS

MITTypeScript

A collection of 44 lightweight, customizable loaders and spinners built with CSS, HTML, and SVG for modern web projects.

GitHub

2.2k stars76 forks0 contributors

What is LDRS?

LDRS is a lightweight library of 44 customizable loaders and spinners built with CSS, HTML, and SVG for web applications. It solves the problem of adding engaging, performant loading animations without bloating bundle sizes or relying on external dependencies. The library provides both Web Components and React components for seamless integration across different frameworks.

Target Audience

Frontend developers building web applications who need lightweight, customizable loading indicators that work across React, Vue, Svelte, Solid, or vanilla HTML projects.

Value Proposition

Developers choose LDRS for its combination of visual variety, zero dependencies, tiny bundle size, and framework-agnostic approach—offering both convenience components and raw HTML/CSS for maximum flexibility.

Overview

Modern, minimalist loaders & spinners. Made with CSS, HTML and SVG. https://uiball.com/ldrs

Use Cases

Best For

Adding loading states to React applications with minimal bundle impact
Creating custom loading animations that match specific design systems
Building performance-optimized websites that avoid GIF dependencies
Implementing consistent loading indicators across multiple JavaScript frameworks
Developing design systems that need reusable, customizable spinner components
Projects requiring TypeScript support for loading animation libraries

Not Ideal For

Projects heavily reliant on server-side rendering with Web Components, as they require client-only rendering or complex workarounds
Applications needing advanced 3D or physics-based animations beyond CSS/SVG capabilities
Teams seeking a full-featured UI component library beyond just loaders and spinners

Pros & Cons

Pros

Wide Loader Variety

Offers 44 unique loader types designed to be interesting yet practical, as highlighted in the key features and README.

Framework Agnostic

Works with React, Vue, Svelte, Solid, and plain HTML via Web Components and React components, ensuring broad compatibility as stated in the README.

Deep Customization

Allows precise control over size, color, stroke width, animation speed, and background opacity to match any design system, detailed in the options section.

Minimal Bundle Impact

Zero dependencies and tiny bundle size, making it ideal for performance-conscious projects, emphasized in the philosophy and features.

Cons

SSR Limitations

Web components cannot be server-side rendered, requiring exclusion or client-only usage in frameworks like Nuxt.js and Astro, as mentioned in the frameworks section.

Separate CSS Imports

React components require importing CSS files separately (e.g., 'ldrs/react/Ring.css'), adding extra steps compared to all-in-one solutions.

Manual Registration Overhead

Web components need manual registration or auto-defining imports, increasing setup complexity and potential for errors in larger projects.

Frequently Asked Questions

Related Projects

AMP

The AMP web component framework.

Stars14,911

Forks4,086

Last commit8 days ago

Shoelace

Shoelace is now Web Awesome. Come see what’s new!

Stars13,868

Forks919

Last commit1 month ago

Wired Elements

Collection of custom elements that appear hand drawn. Great for wireframes or a fun look.

Stars10,773

Forks336

Last commit2 years ago

github-elements

GitHub's Web Component collection.

Stars2,903

Forks64

Last commit4 months ago

Community-curated · Updated weekly · 100% open source

Found a gem we're missing?

Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.

Submit a project Star on GitHub