Collection of free HTML and CSS skeleton loading examples from codepen and other resources.

Author

  • Chris Sev

Made with

  • HTML / CSS (SCSS)

About a code

Loading Card

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Steven Lei

Made with

  • HTML / CSS

About a code

CSS Skeleton

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Håvard Brynjulfsen

Made with

  • HTML / CSS (SCSS)

About a code

Skeleton Loading Using Only a Few Lines of CSS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Kiran A

Made with

  • HTML / CSS

About a code

Movies Skeleton Loading

Loading movies images, title and subtitle and book now button in a skeleton loading pattern.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: bootstrap.css

Author

  • Samir Munjewar

Made with

  • HTML / CSS

About a code

CSS Skeleton Loader Animation

Simple skeleton loader animation using HTML & CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Markus Oberlehner

Made with

  • HTML / CSS (SCSS)

About a code

Pure CSS Skeleton Loading Animation With Shimmer

Improve perceived performance with a fancy skeleton loading animation.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Rafael Goulart

Made with

  • HTML / CSS (Less)

About a code

CSS Grid Card Skeleton Screen with Custom Properties

The skeleton page is a big trend in UX field. Using CSS Grid to create the page layout, it is more practical to work with components that need to be dynamically repeated.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Alexander Kusminov

Made with

  • HTML / CSS

About a code

Card Skeleton Loader

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Max Böck

Made with

  • HTML / CSS (SCSS)

About a code

Card UI Skeleton Screen

This creates a skeleton of a card component using CSS custom properties to draw different gradients on the background-image. Skeleton screens can be used to improve perceived performance while loading.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Viktor Hundahl Strate

Made with

  • HTML / CSS (Sass)

About a code

Skeleton Screen Gradient Animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -