Skip to content

Instantly share code, notes, and snippets.

@akshuvo

akshuvo/ghost-loading-skeleton.css

Created March 24, 2022 16:04
Show Gist options
  • Save akshuvo/dad42687ee81e43cf6bb2bb84690c716 to your computer and use it in GitHub Desktop.
Save akshuvo/dad42687ee81e43cf6bb2bb84690c716 to your computer and use it in GitHub Desktop.
Download ZIP
Ghost Loading Skeleton HTML, CSS
Raw
ghost-loading-skeleton.css
.skeleton {
border-radius: 3px;
-webkit-animation: skeleton 0.5s infinite alternate;
animation: skeleton 0.5s infinite alternate;
-webkit-animation-delay: 0s;
animation-delay: 0s;
background-color: rgba(0, 0, 0, 0.02);
}
.large.skeleton {
height: 1.5em;
width: 5em;
}
@-webkit-keyframes skeleton {
0% {
background-color: rgba(0, 0, 0, 0.02);
}
100% {
background-color: rgba(0, 0, 0, 0.06);
}
}
@keyframes skeleton {
0% {
background-color: rgba(0, 0, 0, 0.02);
}
100% {
background-color: rgba(0, 0, 0, 0.06);
}
}
Raw
ghost-loading-skeleton.html
<div class="skeleton"></div>
<!-- OR -->
<div class="skeleton large"></div>
@akshuvo
Copy link
Author

akshuvo commented Mar 24, 2022 •
edited
Loading

Modify CSS/Style to adjust Height, Width as needed. For Example: <div class="skeleton large" style=" width: 100%; height: 40px; "></div>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment