<div class="container">
<div class="placeholder title"></div>
<div class="placeholder content"></div>
</div>
.container{
width: 300px;
padding: 10px;
background: #eee;
margin: auto;
}
.placeholder{
position: relative;
background: #ccc;
border-radius: 3px;
overflow: hidden;
}
.placeholder::after{
content: "";
position: absolute;
height: 100%;
width: 100px;
left: -100px;
top: 0;
background: linear-gradient(to right, transparent, #ffffff70, transparent);
animation: reflect 800ms ease-out infinite;
}
.title{
width: 80%;
min-height: 20px;
margin-bottom: 10px;
}
.content{
width: 100%;
min-height: 60px;
}
@keyframes reflect{
to{
left: calc(100% + 100px);
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.