Skip to content

Instantly share code, notes, and snippets.

@darkterminal
Created May 6, 2022 08:09
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save darkterminal/595c4de8e2c8b1001c17dd89b6c1694a to your computer and use it in GitHub Desktop.
Save darkterminal/595c4de8e2c8b1001c17dd89b6c1694a to your computer and use it in GitHub Desktop.
Skeleton Loader CSS
/* The loading Class */
.loading {
position: relative;
background-color: #e2e2e2;
}
/* The moving element */
.loading::after {
display: block;
content: "";
position: absolute;
width: 100%;
height: 100%;
transform: translateX(-100%);
background: -webkit-gradient(linear, left top,
right top, from(transparent),
color-stop(rgba(255, 255, 255, 0.2)),
to(transparent));
background: linear-gradient(90deg, transparent,
rgba(255, 255, 255, 0.2), transparent);
/* Adding animation */
animation: loading 0.8s infinite;
}
/* Loading Animation */
@keyframes loading {
100% {
transform: translateX(100%);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment