1 |
|
2 | :root {
|
3 | |
4 |
|
5 |
|
6 | }
|
7 | .swiper-lazy-preloader {
|
8 | width: 42px;
|
9 | height: 42px;
|
10 | position: absolute;
|
11 | left: 50%;
|
12 | top: 50%;
|
13 | margin-left: -21px;
|
14 | margin-top: -21px;
|
15 | z-index: 10;
|
16 | transform-origin: 50%;
|
17 | box-sizing: border-box;
|
18 | border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
|
19 | border-radius: 50%;
|
20 | border-top-color: transparent;
|
21 | }
|
22 | .swiper:not(.swiper-watch-progress),
|
23 | .swiper-watch-progress .swiper-slide-visible {
|
24 | .swiper-lazy-preloader {
|
25 | animation: swiper-preloader-spin 1s infinite linear;
|
26 | }
|
27 | }
|
28 | .swiper-lazy-preloader-white {
|
29 | --swiper-preloader-color: #fff;
|
30 | }
|
31 | .swiper-lazy-preloader-black {
|
32 | --swiper-preloader-color: #000;
|
33 | }
|
34 | @keyframes swiper-preloader-spin {
|
35 | 0% {
|
36 | transform: rotate(0deg);
|
37 | }
|
38 | 100% {
|
39 | transform: rotate(360deg);
|
40 | }
|
41 | }
|