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

  • 12‑column grid with adjustable auto-rows
  • Toggle grid overlay for precise alignment
  • Background color with quick swatches
  • Automatic dark mode (system or manual)

Element editing

  • Click to select, drag to move on grid
  • Double‑click to open edit panel
  • col/row start(similar to moving up,down,left,right)
  • Width/height, radius (px/%)
  • Color and background per element

Icons

  • Default icon set (stroke uses currentColor)
  • Online search with small provider shoutout
  • Live recolor via Icon Color / swatches
  • Safe SVG handling for strings and JSX

Animation

  • Pulse and shimmer skeleton animations
  • Per‑element intensity and speed
  • Global presets for consistent motion
  • Smooth transitions in both themes

Code preview & test

  • Instant HTML/CSS preview as you build
  • SVGs with stroke=currentColor for theming
  • Copy-ready snippets for frameworks
  • Open in Tailwind Playground to verify

Templates

  • Twitter/Instagram/YouTube and more
  • Insert as independent elements (deep‑cloned)
  • Unique IDs per item for stable editing
  • Move one element without shifting others

How to use

  1. Open the Style page and enable Show Grid.
  2. Click the board to place blocks and lines; drag to position.
  3. Double‑click any element to edit radius, colors, and properties.
  4. Add icons from Default or search Online; set Icon Color.
  5. Apply a pulse/shimmer 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.