Buck9195/doesitarm
1
0
Fork 0
mirror of https://github.com/ThatGuySam/doesitarm.git synced 2026-05-15 06:35:20 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

Add extended shimmer class

Browse source
This commit is contained in:
Sam Carlton 2022-05-25 11:45:34 -05:00
parent cb0e1617a0
commit ed9a8db684
1 changed files with 68 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

76
assets/css/tailwind.css
View file

@ -153,19 +153,79 @@ html {
.shimmer {
animation: placeHolderShimmer 1s infinite;
animation-timing-function: linear;
background: #f6f7f8;
background: linear-gradient(to right, rgba(0, 0, 0, 0.07) 8%, rgba(0, 0, 0, 0.45) 18%, rgba(0, 0, 0, 0.07) 33%);
background-color: rgba( 0, 0, 0, 0.1 );
background-image: linear-gradient( 90deg, rgba(0, 0, 0, 0.07) 8%, rgba(0, 0, 0, 0.45) 18%, rgba(0, 0, 0, 0.07) 33%);
background-size: 200% 100px;
background-position: 0 0, 100% 0;
background-attachment: fixed;
}
/* Original - https://codepen.io/ThatGuySam/pen/zYPPYwg */
/* Animation delay so our shimmer looks staggered */
.shimmer *:nth-child(3n-2),
*:nth-child(3n-2) > .shimmer {
animation-delay: 0.2s;
}
.shimmer *:nth-child(3n-1),
*:nth-child(3n-1) > .shimmer {
animation-delay: 0.1s;
}
.shimmer,
.shimmer * {
/* Hide all text */
color: transparent;
}
.shimmer p,
.shimmer img,
.shimmer span,
.shimmer time,
.shimmer h1, .shimmer h2, .shimmer h3, .shimmer h4, .shimmer h5, .shimmer h6 {
animation: placeHolderShimmer 1s infinite;
animation-timing-function: linear;
/* Shimmer gets inserted as an animated background so it can shape to most elements */
/* Base shimmer color */
background-color: rgba( 0, 0, 0, 0.1 );
/* First and last color should be the same so that animation restart is seamless */
background-image: linear-gradient(
90deg,
rgba(0, 0, 0, 0.07) 8%,
rgba(0, 0, 0, 0.13) 18%,
rgba(0, 0, 0, 0.07) 33%
);
background-size: 200% 100px;
background-attachment: fixed;
border: none;
/* Hide all text */
color: transparent;
/* Hide img src */
object-position: -99999px 99999px;
}
/* Inline Shimmers so we get separated shimmer lines on text */
.shimmer p,
.shimmer span,
.shimmer time {
display: inline;
}
@keyframes placeHolderShimmer {
0% {
background-position: 100% 0;
}
100% {
background-position: -100% 0;
}
0% {
background-position: 100% 0
}
100% {
background-position: -100% 0
}
}