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