animated content placeholder

by jpeter06

HTML

<div class="preload">

</div>
<div class="div2 preload">

</div>
<div class="div2 preload">

</div>

CSS

html,body{
  paddin: 0px;
  margin: 0px;
  width: 100%;
  height: 100%;
  overflow: hidden; 
}

div {
  margin:20px;
  border-radius:10px;
  width: 80%;
  height: 80px;
}

.div2{ width:40%}

.preload{

  background: rgb(227, 227, 227);
  background: linear-gradient( 90deg,
  rgba(227, 227, 227, 1) 0%,
  rgba(192, 192, 192, 1) 7%,
  rgba(192, 192, 192, 1) 13%,
  rgba(227, 227, 227, 1) 25% );
  background-size: 400%;
  background-position: 100% 0%;
  animation: animation 1.8s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

@keyframes animation{
  0%{
    background-position: 100% 0%;
  }
   99.99%{
    background-position: -30% 0%;
  }
    100%{
    background-position: 100% 0%;
  }
}