<div class="skeleton-screen"></div>
.skeleton-screen:empty{
margin: auto;
width: 500px;
height: 500px;
background-image:
linear-gradient( 100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 80% ), /* highlight */
radial-gradient( circle 50px at 50px 50px, lightgray 100%, transparent 0 ),
linear-gradient( lightgray 20px, transparent 0 ),
linear-gradient( lightgray 20px, transparent 0 ),
linear-gradient( lightgray 20px, transparent 0 ),
linear-gradient( lightgray 20px, transparent 0 );
background-image:
linear-gradient( 100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 80% ),
radial-gradient( 50px 50px, circle cover, lightgray 50px, transparent 0 ),
linear-gradient( lightgray 20px, transparent 0 ),
linear-gradient( lightgray 20px, transparent 0 ),
linear-gradient( lightgray 20px, transparent 0 ),
linear-gradient( lightgray 20px, transparent 0 );
background-repeat: repeat-y;
background-size:
50px 200px, /* highlight */
100px 200px,
150px 200px,
350px 200px,
300px 200px,
250px 200px;
background-position:
120px 0, /* highlight */
0 0,
120px 0,
120px 40px,
120px 80px,
120px 120px;
animation: shine 1s infinite;
}
@keyframes shine {
to {
background-position:
100% 0, /* move highlight to right */
0 0,
120px 0,
120px 40px,
120px 80px,
120px 120px;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.