<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:
    -webkit-linear-gradient( 100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 80% ),
    -webkit-radial-gradient( 50px 50px, circle cover, lightgray 50px, transparent 0 ),
    -webkit-linear-gradient( lightgray 20px, transparent 0 ),
    -webkit-linear-gradient( lightgray 20px, transparent 0 ),
    -webkit-linear-gradient( lightgray 20px, transparent 0 ),
    -webkit-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;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.