fix(lazy): only activate preloader-spin animation when slide is active …

…nolimits4web#5202
aynzad · Nov 16, 2021 · 72fbda5 · 72fbda5
1 parent 2824b0c
commit 72fbda5
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 2 deletions.
diff --git a/src/modules/lazy/lazy.less b/src/modules/lazy/lazy.less
@@ -14,13 +14,17 @@
   margin-top: -21px;
   z-index: 10;
   transform-origin: 50%;
-  animation: swiper-preloader-spin 1s infinite linear;
+  animation: none;
   box-sizing: border-box;
   border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
   border-radius: 50%;
   border-top-color: transparent;
 }
 
+.swiper-slide-active .swiper-lazy-preloader {
+  animation: swiper-preloader-spin 1s infinite linear;
+}
+
 .swiper-lazy-preloader-white {
   --swiper-preloader-color: #fff;
 }

diff --git a/src/modules/lazy/lazy.scss b/src/modules/lazy/lazy.scss
@@ -14,13 +14,17 @@
   margin-top: -21px;
   z-index: 10;
   transform-origin: 50%;
-  animation: swiper-preloader-spin 1s infinite linear;
+  animation: none;
   box-sizing: border-box;
   border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
   border-radius: 50%;
   border-top-color: transparent;
 }
 
+.swiper-slide-active .swiper-lazy-preloader {
+  animation: swiper-preloader-spin 1s infinite linear;
+}
+
 .swiper-lazy-preloader-white {
   --swiper-preloader-color: #fff;
 }