RSK World - Loading Skeleton Screens | Animated Skeletons, Shimmer, Themes, Accessibility | RSK World

Card & List Form & Chart Themes & Animations Accessibility Vanilla JS

Loading Skeleton Screens is an animated skeleton loading UI toolkit. Features: card, list, article, product grid, table skeletons; advanced form, chart (bar/line/pie), dashboard, comment, search results, notification, gallery skeletons. Animations: shimmer, pulse, wave, fade. Themes: default, dark, blue, green, purple. Config system (config.js), accessibility (ARIA, reduced motion, keyboard), performance (GPU, Intersection Observer, FPS), i18n (English, Hindi, Bengali). index.html, demo.html, advanced-demo.html, style.css, advanced-skeletons.css, script.js, advanced-script.js, config.js, utils.js, performance.js. By rskworld.in.

If you find this Loading Skeleton Screens 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 Loading Skeleton Screens

Skeleton Types & Layouts

Basic skeletons: card (avatar + content), list (icon + line), article (header + paragraphs), product grid, table. Advanced: form (inputs, textarea, select, checkboxes), chart (bar, line, pie), dashboard stat cards, comment blocks, search results, notifications, gallery. All use shared .skeleton base and theme CSS variables.

Basic: skeleton-card, skeleton-list, skeleton-article, skeleton-grid, skeleton-table
Advanced: skeleton-form, skeleton-chart, skeleton-dashboard, skeleton-comment
Config templates in config.js: userCard, productCard, articleCard, formField
Layouts defined in style.css and advanced-skeletons.css

Project Structure & Files

skeleton-loading/ with index.html (main demo + controls), demo.html (simple demo), advanced-demo.html (form, charts, dashboard, comments, search, notifications, gallery). CSS: style.css, advanced-skeletons.css, accessibility.css, advanced-demo.css, enhancements.css. JS: config.js, utils.js, script.js, advanced-script.js, performance.js, enhancements.js. No build step.

skeleton-loading/ – index.html, demo.html, advanced-demo.html, DOCUMENTATION.md
CSS: style.css, advanced-skeletons.css, accessibility.css, enhancements.css
JS: config.js, utils.js, script.js, advanced-script.js, performance.js, enhancements.js
Zero dependencies; vanilla HTML, CSS, JavaScript

Themes & Animations

Animations: shimmer (gradient sweep), pulse, wave, fade — configurable in config.js. Themes: default, dark, blue, green, purple via CSS variables (--skeleton-primary, --skeleton-secondary, --skeleton-accent). AdvancedSkeletonManager applies theme and animation; user preferences saved in localStorage.

Themes: default, dark, blue, green, purple (SkeletonConfig.themes)
Animations: shimmer, pulse, wave, fade (SkeletonConfig.animations)
Body class skeleton-{theme}; CSS variables on :root
Cycle via Theme and Animation buttons or Ctrl+Shift+T / Ctrl+Shift+A

Accessibility & Performance

Accessibility: ARIA labels, aria-busy, role progressbar, screen reader announcer, prefers-reduced-motion (animations off), high contrast, skip link, keyboard nav. Performance: GPU acceleration (translateZ(0)), Intersection Observer (pause off-screen), ResizeObserver, FPS/memory monitoring, auto-optimize when thresholds exceeded.

accessibility.css: .sr-only, focus, reduced-motion, high-contrast
advanced-script.js: enableAccessibilityFeatures(), ARIA on skeletons
performance.js: PerformanceOptimizer, IntersectionObserver, FPS/memory
Keyboard: Ctrl+Shift+S (a11y), Ctrl+Shift+P (performance), Space, Escape

Config & API

config.js: SkeletonConfig (animations, themes, performance, accessibility, breakpoints, i18n en/hi/bn, templates). utils.js: SkeletonUtils (debounce, throttle, DOM, storage, device, features, error). SkeletonManager.createSkeleton(type, container, options), removeSkeleton(skeleton). PerformanceOptimizer.getMetrics(), forceOptimization().

SkeletonConfig – animations, themes, performance, accessibility, i18n
SkeletonManager – createSkeleton, removeSkeleton, theme/animation/a11y toggles
PerformanceOptimizer – FPS, memory, thresholds, observers
SkeletonEnhancements.showToast(message, type) for notifications

What You Get

Static HTML/CSS/JS: skeleton-loading/ folder with index.html, demo.html, advanced-demo.html, style.css, advanced-skeletons.css, accessibility.css, config.js, utils.js, script.js, advanced-script.js, performance.js, enhancements.js, DOCUMENTATION.md. No build step. Open index.html or serve folder.

Complete source – skeleton-loading/ with HTML, CSS, JS
No build step – open index.html or static server
DOCUMENTATION.md with API, shortcuts, i18n, deployment
Technologies: HTML5, CSS3, Vanilla JS. © 2026 RSK World.

Usage

Open index.html or advanced-demo.html. Use Theme and Animation buttons to switch look. Toggle loading state to simulate content load. Accessibility and Performance modes optimize for a11y and low-end devices. Language selector: English, Hindi, Bengali. View Files opens browser.php for project files.

skeleton-loading/index.html – main page with all skeleton types and controls
advanced-script.js: AdvancedSkeletonManager, theme/animation/language
Accessibility: ARIA, reduced motion, keyboard, skip link
Author: RSK World | rskworld.in

Project Features

Card, list, article, product, table skeletons; form, chart, dashboard, comment, search, notification, gallery skeletons. Shimmer, pulse, wave, fade. Five themes. Config system. Accessibility (ARIA, reduced motion, keyboard). Performance monitoring and auto-optimization. i18n (en, hi, bn). Skip link, back-to-top, toasts.

Skeletons – basic and advanced types, all with CSS variables
Controls – theme, animation, accessibility, performance, language
Enhancements – skip link, back-to-top, tooltips, toast
Docs – DOCUMENTATION.md with API and keyboard shortcuts

Credits & Acknowledgments

Loading Skeleton Screens by RSK World. Animated skeleton loading UI for better UX during content loading. Created by Molla Samser (Founder) and Rima Khatun (Designer & Tester).

Loading Skeleton Screens – skeletons, themes, accessibility, performance
RSK World – Project creator and educational platform
Author: Molla Samser (Founder - RSK World)
Website: https://rskworld.in
Email: hello@rskworld.in | +91 93305 39277
© 2026 RSK World. All rights reserved.