RSK World - Shimmer Loading Effect | Skeleton Placeholders, Gradient Animations, Dark Mode | RSK World

Shimmer & Gradients Styles & Themes Placeholders & Skeletons Dark Mode & A11y Vanilla JS

Shimmer Loading Effect is a CSS-only shimmer animation for loading states and placeholders. Features: horizontal, diagonal, wave, pulse, and gradient sweep styles (shimmer-variants.css), color themes (neutral, primary, success, warm, purple), speed control (slow/normal/fast) and dark mode persisted in localStorage (script.js). Includes card, text line, avatar, button, banner placeholders plus table, list, dashboard and video card skeletons (index.html, examples.html). Respects prefers-reduced-motion and optional Reduce motion toggle. Files: index.html, examples.html, styles.css, shimmer-variants.css, script.js, README.md. By rskworld.in.

If you find this Shimmer Loading Effect project useful, you can support with a small contribution.

Secure Fast Trusted

Pay via UPI QR

Scan or tap an amount to auto-generate

₹

Open UPI app

GPay PhonePe Paytm

Download Shimmer Loading Effect

Shimmer Styles & Animations

Base shimmer in styles.css: linear-gradient with background-size 200% 100% and @keyframes shimmer moving background-position. shimmer-variants.css adds diagonal, wave, pulse, and gradient sweep styles. Duration controlled via --shimmer-duration (script.js). Color themes override --shimmer-base and --shimmer-highlight.

styles.css: @keyframes shimmer, .shimmer-block base gradient
shimmer-variants.css: shimmer-style-diagonal, wave, pulse, gradient
shimmer-theme-primary, success, warm, purple
Stagger utilities: shimmer-stagger-1, shimmer-stagger-2, shimmer-stagger-3

Project Structure & Files

shimmer-effect/ with index.html (main: controls, simulate load, card/text/avatar/button/banner placeholders), examples.html (table, list, dashboard, video card skeletons), styles.css (layout, keyframes, dark mode, components), shimmer-variants.css (styles, themes, reduced motion), script.js (dark mode, speed/style/theme, simulate load, reduce motion). No build step. Open index.html or serve folder.

shimmer-effect/ – index.html, examples.html, styles.css, shimmer-variants.css, script.js, README.md
No build step – open index.html or static server
DM Sans (Google Fonts)
Zero dependencies; vanilla HTML, CSS, JavaScript

Controls & Persistence

script.js: Style select (horizontal, diagonal, wave, pulse, gradient) and Theme select (neutral, primary, success, warm, purple) apply classes to .shimmer-controls-target. Speed select sets --shimmer-duration (slow 2.5s, normal 1.5s, fast 0.8s). Dark mode toggle and Reduce motion button. All preferences saved in localStorage (rsk-shimmer-* keys).

STORAGE_KEYS: darkMode, speed, style, theme
applyStyle(), applyTheme(), applySpeed() on change
initDarkMode(): prefers-color-scheme fallback
initReducedMotion(): toggles .body-reduced-motion

Placeholders & Skeletons

Block variants in styles.css: .shimmer-image, .shimmer-line (.w-100 to .w-40), .shimmer-avatar, .shimmer-button, .shimmer-banner. Table skeleton (header + rows with .shimmer-cell), list skeleton (avatar-sm + lines), dashboard skeleton (sidebar + main with hero, stats, lines), video card skeleton (thumb + info with avatar and lines).

Card grid: shimmer-card with image + lines
Simulate load: skeleton then content after 2.2s
examples.html: table-skeleton-wrap, list-skeleton, dashboard-skeleton, video-card-skeleton
Responsive: card grid and dashboard stack on small screens

Pages & Demo

index.html: controls panel, intro, simulate load section, card placeholders, text lines, avatar & lines, button loading, banner placeholder. examples.html: same controls plus table skeleton, list (feed) skeleton, dashboard layout skeleton, video card skeleton. Both use styles.css, shimmer-variants.css, script.js; nav links Home / Examples.

index.html – Home: controls, simulate load, card/text/avatar/button/banner
examples.html – Table, list, dashboard, video card skeletons
script.js: initSimulateLoad() for replay button
Accessibility: aria-label on controls, prefers-reduced-motion support

What You Get

Static HTML/CSS/JS: shimmer-effect/ folder with index.html, examples.html, styles.css, shimmer-variants.css, script.js, README.md. No build step. Open index.html or serve folder.

Complete source – shimmer-effect/ with HTML, CSS, JS
No build step – open index.html or static server
README.md included with features and customization
Technologies: HTML5, CSS3, Vanilla JS. © 2026 RSK World.

Usage

Open index.html or examples.html. Use Style, Speed, Theme selects and Dark mode toggle; try Reduce motion. Click Simulate load again to replay skeleton → content. Customize via --shimmer-base, --shimmer-highlight, --shimmer-duration or add new shimmer-style-* / shimmer-theme-* classes.

shimmer-effect/index.html – main page with controls and placeholders
styles.css: CSS variables, keyframes, block variants
Accessibility: reduce motion, aria labels
Author: RSK World | rskworld.in

Project Features

CSS-only shimmer with 5 styles (horizontal, diagonal, wave, pulse, gradient), 5 color themes, speed control, dark mode, reduce motion, simulate load demo. Placeholders: card, text, avatar, button, banner. Skeletons: table, list/feed, dashboard, video card. Modern layout, responsive, DM Sans font.

Shimmer – gradient animations, multiple styles, color themes
Controls – style, speed, theme, dark mode, reduce motion (localStorage)
Placeholders – card, text, avatar, button, banner, table, list, dashboard, video
A11y – prefers-reduced-motion, Reduce motion toggle

Credits & Acknowledgments

Shimmer Loading Effect by RSK World. Smooth gradient animations for loading states and placeholders, multiple styles and themes, dark mode and accessibility for learning vanilla JS and UI design.

Shimmer Loading Effect – gradient animations, skeletons, dark mode
RSK World – Project creator and educational platform
Author: Molla Samser (Founder - RSK World)
Website: https://rskworld.in
Email: help@rskworld.in | +91 93305 39277
© 2026 RSK World. All rights reserved.