webdevpuneet.com

Related Snippets

73 in Loaders category
14–19 of 60

Code Editor Skeleton Loader

Agent Task Segment Tracker

Async Task Completion Ring

AI Reasoning Collapse Loader

Route Tracking Progress Loader

Barcode Scan Sweep Loader

Code Editor Skeleton Loader — Syntax-Style Shimmer CSS JS

Code Editor Skeleton Loader · Loaders · Plain HTML, CSS & JS · Live preview

CategoryLoaders
TagsCSS AnimationDeveloper ToolsLoading States

Copy & paste

Source Code

<div class="ce-window">
  <div class="ce-titlebar">
    <span class="ce-dot r"></span><span class="ce-dot y"></span><span class="ce-dot g"></span>
    <span class="ce-filename">app.tsx</span>
  </div>
  <div class="ce-body">
    <div class="ce-gutter" id="ceGutter"></div>
    <div class="ce-lines" id="ceLines"></div>
  </div>
</div>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

Randomized per-line indentation for a plausible code shape, not uniform bars
Randomized token count and width per line
Occasional blank lines mimic real source-code breathing room
Tinted token gradients hint at syntax highlighting (keyword, call, string tones)
Real line-number gutter matching the generated line count
Console-style titlebar with window dots and a filename label
Shared shimmer keyframe with per-line animation-delay offsets
Zero dependencies and no syntax-highlighting library required
Easily themeable colors and line count
Drop-in placeholder for any code block, diff view, or IDE panel

About this UI Snippet

Code Editor Skeleton Loader — A Placeholder Shaped Like Real Source Code

Screenshot of the Code Editor Skeleton Loader snippet rendered live

Generic skeleton loaders — flat gray bars of a few fixed widths — work fine for text and cards, but they read as obviously wrong when the real content is source code. Code has line numbers, wildly varied line lengths, indentation that increases and decreases, and color-coded tokens. This snippet builds a skeleton specifically shaped like a code editor: a titlebar with window dots and a filename, a gutter of line numbers, and a body of shimmer "tokens" arranged with randomized indentation and token counts per line.

Randomized, code-shaped line generation

buildLine(i) doesn't just repeat one bar shape. Each line gets a random indent level (0 to 3, multiplied into a margin-left in steps of 18px) and a random count of 1 to 4 token spans, each with its own randomized width between 24px and 92px. Roughly 15% of lines are left blank, mimicking the breathing room real source files have between logical blocks. The result looks like an actual function body rather than a uniform list.

Tinted tokens hint at syntax highlighting

Instead of every shimmer bar sharing one gray gradient, each token is randomly assigned one of a few tinted gradient classes — a muted purple for kw (keyword-like), blue for fn (call-like), and green for str (string-like) — layered under the same moving shimmer animation. The effect reads as a blurred, out-of-focus glimpse of syntax-highlighted code without needing a real syntax highlighter or language grammar.

A believable gutter

The .ce-gutter renders one real line number per generated line, right-aligned in a muted monospace, exactly matching a real code editor's left column — a detail that does a lot of work to sell the illusion, since a gutter is one of the most recognizable features of any code view at a glance.

Console-style chrome

The titlebar's red/yellow/green window dots and monospace filename label match the same convention used by the typewriter status log loader and countless real editors and terminals, so the component is immediately legible as "code" before a single token has rendered.

Why this beats a generic skeleton for code contexts

A generic list-of-bars skeleton over a code preview area creates a visible mismatch the instant real syntax-highlighted code pops in — the shapes don't rhyme. This skeleton's randomized indentation and varied token widths are deliberately irregular in the same way real code is irregular, so the transition into the real editor or code block feels like a continuation rather than a swap.

Customizing it

Adjust LINE_COUNT, the indent step size, or the token width range to match your actual editor's typical line profile. Add more tinted token classes for a richer syntax illusion, or tie LINE_COUNT to the real file's line count once you know it (from a HEAD request or cached metadata) so the skeleton's height doesn't jump when the real content loads. Pair it with a suspense fallback card for the surrounding page shell.

Step by step

How to Use

  1. 1
    Paste HTML, CSS, and JSA code-editor window renders with a titlebar, line-number gutter, and shimmering token lines.
  2. 2
    Observe the varied shapesIndentation, token count, and token width differ per line, with occasional blank lines.
  3. 3
    Notice the tinted tokensMuted purple, blue, and green shimmer tones hint at keywords, calls, and strings.
  4. 4
    Adjust LINE_COUNTChange how many skeleton lines render to match your real editor\u2019s typical height.
  5. 5
    Tune indentation and widthsEdit the randomInt ranges for indent level, token count, and token width.
  6. 6
    Swap in the real editorReplace this component with your real code view (or CodeMirror/Monaco instance) once content loads.

Real-world uses

Common Use Cases

Code snippet and playground loading states
The primary use case — show this while a real syntax-highlighted editor or embed initializes.
Developer tool dashboards
Placeholder for file viewers, diff panels, or log viewers before real content streams in.
Documentation and tutorial sites
A believable placeholder while a live code example loads from a CMS or API.
AI code-generation tools
Show this while an AI assistant is about to stream generated code into an editor pane.
Portfolio and project showcase sites
A polished loading state for embedded code samples on a slower connection.
Related: Typewriter Status Log Loader
See the Typewriter Status Log Loader for a matching console-styled loading pattern.

Got questions?

Frequently Asked Questions

A generic skeleton\u2019s uniform bar widths and lack of indentation create a visible mismatch the instant real syntax-highlighted code appears — the shapes don\u2019t resemble each other. This component randomizes indentation, token count, and token width per line specifically so its irregular shape rhymes with how real code actually looks.

Each token span is randomly assigned one of a few CSS classes (kw, fn, str, or none) that layer a tinted gradient under the same shimmer animation used for the base gray tokens. It is not real syntax analysis — just enough color variation to visually suggest highlighted code at a glance.

Set LINE_COUNT to the actual line count of the file you\u2019re about to load, if you know it ahead of time (e.g. from cached file metadata), so the skeleton\u2019s height doesn\u2019t change once the real editor mounts and causes a layout shift.

Yes. Add another class to the TOKEN_CLASSES array in the JS and a matching .ce-tok.yourclass rule in the CSS with its own tinted linear-gradient — the random selection logic picks up new entries automatically.

No. It has no awareness of any programming language — it is a purely decorative placeholder built from randomized shapes and tinted shimmer gradients meant to be swapped out for your real syntax-highlighted content once it loads.

Yes. Move the line-generation logic (indent level, token count, token widths, blank-line chance) into a function that returns an array of line descriptors computed once via useMemo (or your framework\u2019s equivalent) so the random shapes don\u2019t change on every re-render, then map that array to markup.