Support » Plugin: LiteSpeed Cache » 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

Viewing 2 replies - 1 through 2 (of 2 total)
Viewing 2 replies - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.