DarnlyCSS loading spinners and skeletons
Pick one of 20 pure-CSS loaders, set its color, size and speed, and copy it as HTML and CSS, Tailwind or React. Or build a skeleton card that matches your layout.
Free from Darnly. Spot a bug in the app you're building? Darnly hands it to Claude Code, Codex or Cursor in one key.Add to Chrome
Shown smaller to fit. The code uses your size.
More free tools
See all 89 tools- Font finderSee what fonts any website uses, whether they’re free, and copy them into your project.
- Color palette from imageThe main colors of any screenshot or logo, as hex, CSS and Tailwind.
- Website color finderGet any website’s color palette and CSS color variables, ready for CSS, Tailwind or your AI agent.
How it works
- Pick a loader from the grid. Every one is pure CSS, so there is nothing to install.
- Change its color, size and speed, and see it on a light or dark page and inside a button.
- Copy it as HTML and CSS, as a Tailwind class, or as a React component. Or switch to “Skeleton screens” and build a gray placeholder card that matches your layout.
Questions
Spinner or skeleton: which should I use?
Use a skeleton when you know roughly what is coming, like a list of posts or a profile card. It makes the page feel faster because the layout is already there. Use a spinner or a bar for short waits with no layout to show, like a button that is saving.
What happens for people who turn off animations?
Every code snippet includes a prefers-reduced-motion rule. Loaders slow down to a third of their speed, so people still see that something is happening. Skeletons stop moving and stay as calm gray blocks.
Do I need a library or an icon font?
No. Each loader is one div, sometimes with a few empty spans inside, plus a little CSS. No JavaScript, images or packages.
Can screen readers tell it is loading?
Yes. Each loader has role="status" and a label (“Loading” by default, which you can change), so screen readers announce it.
How do I change the color later?
Each loader reads three CSS variables: --loader-color, --loader-size and --loader-speed. Change them in the CSS, or set them on one element. In the Tailwind version the color is the text color, so text-sky-500 works.
Is anything uploaded?
No. Everything runs in your browser.