Skeleton Loader is a grid-based builder for crafting polished loading placeholders. Click the board to layout, double-click any element to edit, preview the code, and test instantly.

Board settings

  • Single-Click to open board edit panel
  • default row is divided into 12-column grid
  • Adjust according to your needs

Element editing

  • Double-click to open element edit panel
  • col/row start(similar to moving up,down,left,right)
  • Width/height, radius (px/%)
  • Color and background per element
  • for custom element, you can change icon also

Icons

  • Double-click to open element edit panel
  • two type of icons: default and online
  • Default icon set (stroke uses currentColor)
  • Online search with small provider shoutout(svgviewer.dev)

Animation

  • Built-in animations for common use cases
  • which includes pulse, shimmer, and subtle motion
  • Live preview per element

Code preview & test

  • Instant Tailwind Code preview as you build
  • Copy-ready snippets for frameworks
  • Open in Tailwind Playground to verify

Templates

  • Built-in templates for common use cases
  • add multiple templates on your board
  • edit as you like

How to use

  1. Open the Playground page. For better experience open in desktop view, and zoom-out to 80%
  2. Add a element & icon from the toolbox, edit according to your needs.
  3. Pre-build templates for common use cases
  4. Click the board & Double-click any element to open edit panel.
  5. Apply an animation for realistic loading.
  6. Preview the code and test it in the Tailwind Playground.

Board-first workflow

Layout on a grid with snapping and a subtle overlay. Resize, nudge, and align quickly.

Precise controls

Edit spans and positions numerically. Radius supports px/% for smooth corners and avatars.

Icon system

Default icons recolor via currentColor; online icons render safely with a small provider credit.