img{opacity:0;transition:opacity .5s ease-in-out;position:relative}img::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background-color:#f0f0f0;border-radius:4px}img::after{content:'';position:absolute;top:50%;left:50%;width:30px;height:30px;border:3px solid #ddd;border-top-color:#666;border-radius:50%;animation:img-loading-spin 1s linear infinite;transform:translate(-50%,-50%)}img.loaded,img.complete{opacity:1}img.loaded::before,img.loaded::after,img.complete::before,img.complete::after{display:none}@keyframes img-loading-spin{to{transform:translate(-50%,-50%)rotate(360deg)}}