Created
October 17, 2021 15:22
-
-
Save drikusroor/d68ad4059c5a13d2c8df83cf012c98d9 to your computer and use it in GitHub Desktop.
Simple animated skeleton in Sass & CSS
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Sass | |
.skeleton { | |
display: inline-block; | |
height: 1em; | |
position: relative; | |
overflow: hidden; | |
background-color: #dddbdd; | |
&::after { | |
position: absolute; | |
top: 0; | |
right: 0; | |
bottom: 0; | |
left: 0; | |
transform: translateX(-100%); | |
background-image: linear-gradient( | |
90deg, | |
rgba(#fff, 0) 0, | |
rgba(#fff, 0.2) 20%, | |
rgba(#fff, 0.5) 60%, | |
rgba(#fff, 0) | |
); | |
animation: shimmer 5s infinite; | |
content: ""; | |
} | |
@keyframes shimmer { | |
100% { | |
transform: translateX(100%); | |
} | |
} | |
&--card { | |
width: 100%; | |
height: 300px; | |
} | |
&--rounded { | |
border-radius: 5px; | |
} | |
} | |
// CSS | |
.skeleton { | |
display: inline-block; | |
height: 1em; | |
position: relative; | |
overflow: hidden; | |
background-color: #dddbdd; | |
} | |
.skeleton::after { | |
position: absolute; | |
top: 0; | |
right: 0; | |
bottom: 0; | |
left: 0; | |
transform: translateX(-100%); | |
background-image: linear-gradient( | |
90deg, | |
rgba(255, 255, 255, 0) 0, | |
rgba(255, 255, 255, 0.2) 20%, | |
rgba(255, 255, 255, 0.5) 60%, | |
rgba(255, 255, 255, 0) | |
); | |
animation: shimmer 5s infinite; | |
content: ""; | |
} | |
@keyframes shimmer { | |
100% { | |
transform: translateX(100%); | |
} | |
} | |
.skeleton--card { | |
width: 100%; | |
height: 300px; | |
} | |
.skeleton--rounded { | |
border-radius: 5px; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment