mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
42 lines
2.9 KiB
Text
42 lines
2.9 KiB
Text
|
/* Preloader */
|
||
|
|
.swiper-lazy-preloader {
|
||
|
|
width: 42px;
|
||
|
|
height: 42px;
|
||
|
|
position: absolute;
|
||
|
|
left: 50%;
|
||
|
|
top: 50%;
|
||
|
|
margin-left: -21px;
|
||
|
|
margin-top: -21px;
|
||
|
|
z-index: 10;
|
||
|
|
-webkit-transform-origin: 50%;
|
||
|
|
-moz-transform-origin: 50%;
|
||
|
|
transform-origin: 50%;
|
||
|
|
-webkit-animation: swiper-preloader-spin 1s steps(12, end) infinite;
|
||
|
|
-moz-animation: swiper-preloader-spin 1s steps(12, end) infinite;
|
||
|
|
animation: swiper-preloader-spin 1s steps(12, end) infinite;
|
||
|
|
}
|
||
|
|
.swiper-lazy-preloader:after {
|
||
|
|
display: block;
|
||
|
|
content: "";
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
.encoded-svg-background("<svg viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><defs><line id='l' x1='60' x2='60' y1='7' y2='27' stroke='#6c6c6c' stroke-width='11' stroke-linecap='round'/></defs><g><use xlink:href='#l' opacity='.27'/><use xlink:href='#l' opacity='.27' transform='rotate(30 60,60)'/><use xlink:href='#l' opacity='.27' transform='rotate(60 60,60)'/><use xlink:href='#l' opacity='.27' transform='rotate(90 60,60)'/><use xlink:href='#l' opacity='.27' transform='rotate(120 60,60)'/><use xlink:href='#l' opacity='.27' transform='rotate(150 60,60)'/><use xlink:href='#l' opacity='.37' transform='rotate(180 60,60)'/><use xlink:href='#l' opacity='.46' transform='rotate(210 60,60)'/><use xlink:href='#l' opacity='.56' transform='rotate(240 60,60)'/><use xlink:href='#l' opacity='.66' transform='rotate(270 60,60)'/><use xlink:href='#l' opacity='.75' transform='rotate(300 60,60)'/><use xlink:href='#l' opacity='.85' transform='rotate(330 60,60)'/></g></svg>");
|
||
|
|
background-position: 50%;
|
||
|
|
-webkit-background-size: 100%;
|
||
|
|
background-size: 100%;
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
|
||
|
|
}
|
||
|
|
.swiper-lazy-preloader-white:after {
|
||
|
|
.encoded-svg-background("<svg viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><defs><line id='l' x1='60' x2='60' y1='7' y2='27' stroke='#fff' stroke-width='11' stroke-linecap='round'/></defs><g><use xlink:href='#l' opacity='.27'/><use xlink:href='#l' opacity='.27' transform='rotate(30 60,60)'/><use xlink:href='#l' opacity='.27' transform='rotate(60 60,60)'/><use xlink:href='#l' opacity='.27' transform='rotate(90 60,60)'/><use xlink:href='#l' opacity='.27' transform='rotate(120 60,60)'/><use xlink:href='#l' opacity='.27' transform='rotate(150 60,60)'/><use xlink:href='#l' opacity='.37' transform='rotate(180 60,60)'/><use xlink:href='#l' opacity='.46' transform='rotate(210 60,60)'/><use xlink:href='#l' opacity='.56' transform='rotate(240 60,60)'/><use xlink:href='#l' opacity='.66' transform='rotate(270 60,60)'/><use xlink:href='#l' opacity='.75' transform='rotate(300 60,60)'/><use xlink:href='#l' opacity='.85' transform='rotate(330 60,60)'/></g></svg>");
|
||
|
|
}
|
||
|
|
@-webkit-keyframes swiper-preloader-spin {
|
||
|
|
100% {
|
||
|
|
-webkit-transform: rotate(360deg);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@keyframes swiper-preloader-spin {
|
||
|
|
100% {
|
||
|
|
transform: rotate(360deg);
|
||
|
|
}
|
||
|
|
}
|