Skip to content
SkillCodex
Menu

Skeleton shimmer

Skeleton shimmer

Skeleton shimmer adds a moving highlight to a placeholder while content is pending. It gives no percentage or promise about remaining time.

Try the component
Context, sources and actions
Sources and revision
Updated
Version
v1.0.26 · r1
Sources
4 sources
Status
Published
Read the sources

You may have searched for: a highlight moves across a placeholderpause the loading shimmera static loading preview

All phrasings
Save and share

Recognize

Documented cost and limits

DOM rendering with transform or opacity through Web Animations API, with no added animation dependency, Canvas or WebGL. The module is requested on Load demo. The spring prepares 121 points once; the browser then controls playback. Continuous shimmer keeps consuming resources until paused or unmounted.

These properties can avoid layout work; they guarantee neither GPU compositing nor smooth playback on low-end devices. Battery, GPU and real-device performance remain unmeasured. Static state and text remain the reference when the system reduces motion or the API is missing.

web.dev · rendering cost · MDN · Web Animations API

Motion & Effects

Try it

Does motion explain a change, report state, or only decorate?

Skeleton shimmer

Shared trial context

An item moves, changes state or waits for content. Which information must survive without motion?

Skeleton shimmer

Static preview: state and result remain readable without motion. Activate the demo to compare the parameter, pause and try the fallback.

Compare 1200 and 2400 ms per sweep. Speed changes the decoration, not the load. Show content completes this local simulation; no network request is made.

What this example shows

Skeleton reserves the content shape; shimmer is optional decoration on that shape. Unlike a progress bar, neither measures completion.

Which fits your need?

Skeleton shimmer

Demonstrate a loading placeholder with reserved space and persistent Loading text.

Easing

Make a short positional change easier to follow with a predictable duration.

Which component will you use here?
Difference and sources

Skeleton reserves the content shape; shimmer is optional decoration on that shape. Unlike a progress bar, neither measures completion.

Read the sources

    Parts of the specimen

    Select a numbered marker on the schematic, or use the list below, to see its role. The schematic shows the concept's representative state.

    Trigger

    The control that opens or reveals the surface.

    Position in the atlas

    Relationship map

    Locate the chapter, neighboring concepts, and the next useful decision.

    • Chapter

      Motion & Effects

      Skeleton shimmer belongs to this comparison group.

    • Do not confuse

      Easing

      Choose Skeleton shimmer if you need optional loading decoration. Choose Easing if you need a fixed-duration pace.

      Compare this pair
    • Do not confuse

      Spring animation

      Choose Skeleton shimmer if you need optional loading decoration. Choose Spring animation if you need a damped physical response.

      Compare this pair
    • Do not confuse

      State transition

      Choose Skeleton shimmer if you need optional loading decoration. Choose State transition if you need persistent state feedback.

      Compare this pair
    • Do not confuse

      Reduced motion and fallback

      Choose Skeleton shimmer if you need optional loading decoration. Choose Reduced motion and fallback if you need the same result without movement.

      Compare this pair
    • Next step

      Compare the concepts in the chapter before choosing an implementation.

      Open the chapter

    In your own words

    Understand

    What people describe

    Documented aliases: skeleton shimmer

    • a highlight moves across a placeholder
    • pause the loading shimmer
    • a static loading preview
    • show content after a skeleton
    • loading decoration without a percentage
    • reserve space while content loads

    Choose

    Use it when

    • Demonstrate a loading placeholder with reserved space and persistent Loading text.

    Avoid it when

    • Avoid continuous shimmer on large areas, unknown long waits without recovery, and fake percentages.

    Compare

    Compare similar concepts

    Verification checklist

    Try these actions in the lab, then check the same behaviours in your agent’s result. Adapt the example names to your interface.

    1. 1. Do this

      Compare a fast and a slow shimmer over the same loading placeholders.

      Expected result

      Only the highlight speed changes; neither version suggests a measured percentage or a guaranteed completion time.

    2. 2. Do this

      Pause the shimmer or enable its static fallback while content is still loading.

      Expected result

      The loading message and reserved content space remain visible without movement.

    3. 3. Do this

      Show the loaded content, then reach the next real control with Tab.

      Expected result

      Real content replaces the placeholders; the shimmer never creates an extra keyboard stop.

    Full contract
    1. 1The result is readable with no animation
    2. 2Pause, system reduction and fallback work during playback
    3. 3Unmount cancels effects and listeners
    4. 4Only transform or opacity changes; device cost remains unmeasured

    Understand → Recognize → Choose → Compare

    Pack for your agent

    Pre-written instructions to paste into your agent. Copying executes nothing.

    Implement correctly

    Build Skeleton shimmer without breaking its behavior

    # Implement Skeleton shimmer in your agent
    
    ## Objective
    Implement Skeleton shimmer for this verified behavior: Skeleton shimmer adds a moving highlight to a placeholder while content is pending. It gives no percentage or promise about remaining time.
    
    ## Prerequisites
    - Inspect the repository, design system, and existing tests first.
    - Preserve unrelated changes and keep the file scope bounded.
    - Confirm that Skeleton shimmer matches the need before writing code.
    
    ## Required behavior
    - A live region announces new status only when the update is important and not already focused.
    - Pointer, Enter, or Space activation runs one named action exactly once.
    
    ## States to cover
    - Ready — Static initial state
    - Running — The optional effect runs
    - Paused — Playback is frozen
    - Result — Persistent result with no motion required
    
    ## Accessibility
    - ARIA role: button + select + checkbox + status
    - The primary control or named region for Skeleton shimmer has a stable accessible name from visible text or an explicit programmatic label; placeholder text and tooltips are not names.
    - Focus stays on the activated control. Reset restores focus to its button.
    - Pause freezes playback; static fallback cancels it. Leaving the specimen cancels its animation and removes listeners.
    - Announce state changes with concise text, never animation frames. Decorative graphics stay hidden from assistive technology.
    - Tab reaches every control
    - Enter or Space activates buttons; arrows change the native select; Space toggles the static fallback checkbox
    
    ## When not to use
    - Avoid continuous shimmer on large areas, unknown long waits without recovery, and fake percentages.
    
    ## Acceptance criteria
    - The result is readable with no animation
    - Pause, system reduction and fallback work during playback
    - Unmount cancels effects and listeners
    - Only transform or opacity changes; device cost remains unmeasured
    
    ## Guardrails
    - Show the proposed changes before any external action.
    - Do not publish, send, delete, pay for, or change remote state without explicit authorization.
    - Preserve unrelated changes and stop if the scope becomes ambiguous.
    
    ## Output format
    - Outcome or verdict.
    - Files or actions involved.
    - Checks run and observable evidence.
    - Remaining blockers or limitations.
    
    • Web platform
    • Requires · Access to the repository, design system, and tests
    Why it works
    • The need is tied to canonical behavior before any technical choice.
    • States, accessibility, and non-goals prevent a merely visual implementation.
    • Acceptance criteria and the output format make verification observable.

    Try next

    Verify Skeleton shimmer on a real journey

    # Verify Skeleton shimmer after implementation
    
    ## Objective
    Audit the Skeleton shimmer implementation against its behavior, states, and accessibility requirements without changing it automatically.
    
    ## Checks
    - Replay the smallest representative journey.
    - Check keyboard behavior, focus, accessible name, and announcements.
    - Tie each gap to a specific acceptance criterion.
    
    ## Guardrails
    - Show the proposed changes before any external action.
    - Do not publish, send, delete, pay for, or change remote state without explicit authorization.
    - Preserve unrelated changes and stop if the scope becomes ambiguous.
    
    ## Output format
    - Outcome or verdict.
    - Files or actions involved.
    - Checks run and observable evidence.
    - Remaining blockers or limitations.
    

    sha256:1fda7ec295dc2e8112fa28b5a7eb2f28568ffa0faa1e15b6e542d61536debd58

    Diagnose a problem

    Find and fix the Skeleton shimmer defect

    # Debug Skeleton shimmer in your agent
    
    ## Observed symptom
    [DESCRIBE THE SYMPTOM HERE]
    
    ## Observable checks
    - Reproduce the issue with the smallest relevant journey.
    - Compare behavior with the documented states and transitions for Skeleton shimmer.
    - Verify keyboard behavior, focus, accessible name, and announcements.
    
    ## Possible causes
    - The chosen primitive does not match the expected behavior.
    - A state, transition, or focus return is missing.
    - A neighboring component captures an event or hides an accessible signal.
    
    ## Bounded corrections
    - Fix the reproduced cause without recreating neighboring components.
    - Preserve the public contract and add a focused regression test.
    - Do not install dependencies or change remote state without authorization.
    
    ## Final verification
    - The result is readable with no animation
    - Pause, system reduction and fallback work during playback
    - Unmount cancels effects and listeners
    - Only transform or opacity changes; device cost remains unmeasured
    
    ## Guardrails
    - Show the proposed changes before any external action.
    - Do not publish, send, delete, pay for, or change remote state without explicit authorization.
    - Preserve unrelated changes and stop if the scope becomes ambiguous.
    
    ## Output format
    - Outcome or verdict.
    - Files or actions involved.
    - Checks run and observable evidence.
    - Remaining blockers or limitations.
    
    • Web platform
    • Requires · Access to the repository, design system, and tests
    Why it works
    • The explicit symptom prevents starting from an assumed fix.
    • Checks separate behavior, accessibility, and neighboring interference.
    • The fix stays bounded and must produce regression evidence.

    Try next

    Lock in the Skeleton shimmer fix

    # Prevent the Skeleton shimmer regression
    
    ## Objective
    Turn the reproduced cause into a focused regression test and compare Skeleton shimmer with neighboring concepts before widening the fix.
    
    ## Checks
    - Prove that the test fails before the fix.
    - Prove that it passes after the bounded fix.
    - Verify that no neighboring component changed behavior.
    
    ## Guardrails
    - Show the proposed changes before any external action.
    - Do not publish, send, delete, pay for, or change remote state without explicit authorization.
    - Preserve unrelated changes and stop if the scope becomes ambiguous.
    
    ## Output format
    - Outcome or verdict.
    - Files or actions involved.
    - Checks run and observable evidence.
    - Remaining blockers or limitations.
    

    sha256:23231b6aac7e24cb9291d86c16a064ac1519811a58a5df049877c3b9385add03

    Full entry, saving and provenance

    Pre-written instruction by SkillCodex — your request is neither sent nor used to adapt this text; no content is generated, and copying executes nothing.

    Pack digest: sha256:a6cd125b5cb604c33a37354bc8ddeed2e8ec28b796c694771e934e5e10a47251

    In code

    TechnologyPrimitiveVersionCaveat
    Web platform

    button, label, select, input[type=checkbox] and decorative div

    NativeNative browser animation demo, not a new ARIA widget. Static content remains usable.

    Technical details

    Behaviors

    • Announce meaningful changes

      A live region announces new status only when the update is important and not already focused.

    • Run an action

      Pointer, Enter, or Space activation runs one named action exactly once.

    States

    • Ready

      Static initial state

    • Running

      The optional effect runs

    • Paused

      Playback is frozen

    • Result

      Persistent result with no motion required

    State transitions

    • Ready → Running

      Activate Play when motion is available

    • Running → Paused

      Activate Pause

    • Running → Result

      Finish or activate static fallback

    Test scenarios

    Context
    Demonstrate a loading placeholder with reserved space and persistent Loading text.
    Mission
    Compare 1200 and 2400 ms per sweep. Speed changes the decoration, not the load. Show content completes this local simulation; no network request is made.
    Primary state
    Skeleton shimmer adds a moving highlight to a placeholder while content is pending. It gives no percentage or promise about remaining time.
    Edge case
    System reduction or an unavailable animation API gives the same static information. No data operation depends on playback.

    Visual signals

    • A bounded specimen with a visible start and result
    • Text remains readable without movement

    Behavioral signals

    • Compare 1200 and 2400 ms per sweep. Speed changes the decoration, not the load. Show content completes this local simulation; no network request is made.
    • Starts only on request; pause and static fallback remain available

    Accessibility

    Role
    button + select + checkbox + status
    Accessible name
    The primary control or named region for Skeleton shimmer has a stable accessible name from visible text or an explicit programmatic label; placeholder text and tooltips are not names.
    Focus
    Focus stays on the activated control. Reset restores focus to its button.
    Dismissal
    Pause freezes playback; static fallback cancels it. Leaving the specimen cancels its animation and removes listeners.
    Scroll
    Activating the control with Space does not scroll the page, and feedback appears without moving focus or causing an unexpected jump.
    Announcement
    Announce state changes with concise text, never animation frames. Decorative graphics stay hidden from assistive technology.
    Keyboard
    • Tab reaches every control
    • Enter or Space activates buttons; arrows change the native select; Space toggles the static fallback checkbox

    Bindings

    Open the HTML, ARIA, Radix, and shadcn matrix
    • button, label, select, input[type=checkbox] and decorative div

      implementationKind
      custom
      nativeElement
      button, label, select, input[type=checkbox] and decorative div
      ariaPattern
      native controls and status text
      radixPrimitive
      Not applicable
      shadcnRecipe
      Not applicable
      runtimeDependency
      Not applicable
      packageName
      Not applicable
      exportName
      Not applicable
      exactVersion
      Not applicable
      status
      exception
      sourceId
      source-ui-motion-waapi
      deprecationStatus
      active
      replacement
      Not applicable
      validFrom
      Not applicable
      validUntil
      Not applicable

      Equivalence caveat: Native browser animation demo, not a new ARIA widget. Static content remains usable.

      Verify binding source

    Sources

    • WAI-ARIA 1.2: aria-busy
      sourceId
      source-ui-wai-aria-busy
      kind
      standard
      canonicalUrl
      https://www.w3.org/TR/wai-aria-1.2/#aria-busy
      publisher
      W3C WAI
      sourceRevision
      W3C-REC-wai-aria-1.2-20230606
      consultedAt
      2026-07-19
      license
      Not stated
      contentDigest
      sha256:c0fea16fc747779569ab754d2d25bca3e2b7e8a673b8ef5362aeb9ebc73a4849
      status
      verified

      Claim covered: Skeleton shimmer: the normative aria-busy state for exposing a region while its content is updating.

    • Web Animations API
      sourceId
      source-ui-motion-waapi
      kind
      documentation
      canonicalUrl
      https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API
      publisher
      MDN
      sourceRevision
      Wed, 16 Sep 2026 01:08:41 GMT
      consultedAt
      2026-09-16
      license
      Not stated
      contentDigest
      sha256:b030cde49d8dbf6294ab507e29a03d53591011c9bd11ca2d48d87182a0abd50b
      status
      verified

      Claim covered: Skeleton shimmer: Browser animation playback, pause and cancellation.

    • prefers-reduced-motion
      sourceId
      source-ui-motion-reduction
      kind
      documentation
      canonicalUrl
      https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-reduced-motion
      publisher
      MDN
      sourceRevision
      Wed, 16 Sep 2026 01:08:49 GMT
      consultedAt
      2026-09-16
      license
      Not stated
      contentDigest
      sha256:573fe46ee27fed249d9c39e910a2a6c258cee26527e90554ba5b02eba1496fbf
      status
      verified

      Claim covered: Skeleton shimmer: User motion preferences and a static alternative.

    • High-performance animations
      sourceId
      source-ui-motion-performance
      kind
      documentation
      canonicalUrl
      https://web.dev/articles/animations-guide?hl=de
      publisher
      Google web.dev
      sourceRevision
      Tue, 06 Oct 2020 07:00:00 GMT
      consultedAt
      2026-09-16
      license
      Not stated
      contentDigest
      sha256:2f4492e9ba7b3679936eac2f1f1e6e42dcde7fc65bf29cf6f848d076df224acd
      status
      verified

      Claim covered: Skeleton shimmer: Transform and opacity rendering costs; compositor eligibility is not a performance guarantee.