Lazy Load Animation

How to give animation like this when lazy load?
I’ve tried using this CSS but the image is having problems:

/* PART 1 - Before Lazy Load */
img[data-lazyloaded]{
     opacity: 0;
}
/* PART 2 - Upon Lazy Load */
img.litespeed-loaded{
   display: inline-block;
   position: relative;
   width: 80px;
   height: 80px;
   position: absolute;
   border: 4px solid #fff;
   opacity: 1;
   border-radius: 50%;
   animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
animation-delay: -0.5s;

@keyframes lds-ripple {
   0% {
     top: 36px;
     left: 36px;
     width: 0;
     height: 0;
     opacity: 1;
   }
   100% {
     top: 0px;
     left: 0px;
     width: 72px;
     height: 72px;
     opacity: 0;
   }
}
}

Source code: https://loading.io/css/
Thank you