fix(lazy): only activate preloader-spin animation when slide is activ… (#5203)

* fix(lazy): only activate preloader-spin animation when slide is active #5202

* chore(lazy): remove unnecessary animation: none

* refactor(lazy): animate preloader for all visible slides

Author: aynzad

src/modules/lazy/lazy.less

@@ -14,13 +14,16 @@
   margin-top: -21px;
   z-index: 10;
   transform-origin: 50%;
-  animation: swiper-preloader-spin 1s infinite linear;
   box-sizing: border-box;
   border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
   border-radius: 50%;
   border-top-color: transparent;
 }
 
+.swiper-slide-visible .swiper-lazy-preloader {
+  animation: swiper-preloader-spin 1s infinite linear;
+}
+
 .swiper-lazy-preloader-white {
   --swiper-preloader-color: #fff;
 }

src/modules/lazy/lazy.scss

@@ -14,13 +14,16 @@
   margin-top: -21px;
   z-index: 10;
   transform-origin: 50%;
-  animation: swiper-preloader-spin 1s infinite linear;
   box-sizing: border-box;
   border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
   border-radius: 50%;
   border-top-color: transparent;
 }
 
+.swiper-slide-visible .swiper-lazy-preloader {
+  animation: swiper-preloader-spin 1s infinite linear;
+}
+
 .swiper-lazy-preloader-white {
   --swiper-preloader-color: #fff;
 }