.swpf-preloader1 {
    width: 50px;
    --b: 8px;
    aspect-ratio: 1;
    border-radius: 50%;
    padding: 1px;
    background: conic-gradient(#0000 10%, #FFF) content-box;
    -webkit-mask:
        repeating-conic-gradient(#0000 0deg, #000 1deg 20deg, #0000 21deg 36deg),
        radial-gradient(farthest-side, #0000 calc(100% - var(--b) - 1px), #000 calc(100% - var(--b)));
    -webkit-mask-composite: destination-in;
    mask-composite: intersect;
    animation: swpf-preloader1 1s infinite steps(10);
}

@keyframes swpf-preloader1 {
    to {
        transform: rotate(1turn)
    }
}


.swpf-preloader2 {
    width: 50px;
    aspect-ratio: 1;
    border-radius: 50%;
    background:
        radial-gradient(farthest-side, #FFF 94%, #0000) top/8px 8px no-repeat,
        conic-gradient(#0000 30%, #FFF);
    -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 8px), #000 0);
    animation: swpf-preloader2 1s infinite linear;
}

@keyframes swpf-preloader2 {
    100% {
        transform: rotate(1turn)
    }
}


.swpf-preloader3 {
    width: 120px;
    height: 22px;
    border-radius: 20px;
    color: #FFF;
    border: 2px solid;
    position: relative;
}

.swpf-preloader3::before {
    content: "";
    position: absolute;
    margin: 2px;
    inset: 0 100% 0 0;
    border-radius: inherit;
    background: currentColor;
    animation: swpf-preloader3 1s infinite;
}

@keyframes swpf-preloader3 {
    100% {
        inset: 0
    }
}


.swpf-preloader4 {
    width: 20px;
    aspect-ratio: 1;
    background: #FFF;
    box-shadow: 0 0 60px 15px #FFF;
    transform: translate(-80px);
    clip-path: inset(0);
    animation:
        swpf-preloader4a 0.5s ease-in-out infinite alternate,
        swpf-preloader4b 1s ease-in-out infinite;
}

@keyframes swpf-preloader4a {
    100% {
        transform: translateX(80px)
    }
}

@keyframes swpf-preloader4b {
    33% {
        clip-path: inset(0 0 0 -100px)
    }

    50% {
        clip-path: inset(0 0 0 0)
    }

    83% {
        clip-path: inset(0 -100px 0 0)
    }
}


.swpf-preloader5 {
    width: 55px;
    aspect-ratio: 1;
    --c1: linear-gradient(90deg, #0000 calc(100%/3), #FFF 0 calc(2*100%/3), #0000 0);
    --c2: linear-gradient(0deg, #0000 calc(100%/3), #FFF 0 calc(2*100%/3), #0000 0);
    background: var(--c1), var(--c2), var(--c1), var(--c2);
    background-size: 300% 4px, 4px 300%;
    background-repeat: no-repeat;
    animation: swpf-preloader5 1s infinite linear;
}

@keyframes swpf-preloader5 {
    0% {
        background-position: 50% 0, 100% 100%, 0 100%, 0 0
    }

    25% {
        background-position: 0 0, 100% 50%, 0 100%, 0 0
    }

    50% {
        background-position: 0 0, 100% 0, 50% 100%, 0 0
    }

    75% {
        background-position: 0 0, 100% 0, 100% 100%, 0 50%
    }

    75.01% {
        background-position: 100% 0, 100% 0, 100% 100%, 0 50%
    }

    100% {
        background-position: 50% 0, 100% 0, 100% 100%, 0 100%
    }
}


.swpf-preloader6 {
    display: inline-flex;
    gap: 10px;
}

.swpf-preloader6:before,
.swpf-preloader6:after {
    content: "";
    height: 26px;
    aspect-ratio: 1;
    border-radius: 50%;
    background:
        radial-gradient(farthest-side, #000 95%, #0000) 35% 35%/6px 6px no-repeat #fff;
    transform: scaleX(var(--s, 1)) rotate(0deg);
    animation: swpf-preloader6 1s infinite linear;
}

.swpf-preloader6:after {
    --s: -1;
    animation-delay: -0.1s;
}

@keyframes swpf-preloader6 {
    100% {
        transform: scaleX(var(--s, 1)) rotate(360deg);
    }
}


.swpf-preloader7 {
    width: 40px;
    aspect-ratio: 1;
    position: relative;
}

.swpf-preloader7:before,
.swpf-preloader7:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    margin: -8px 0 0 -8px;
    width: 16px;
    aspect-ratio: 1;
    background: #FFF;
    animation:
        swpf-preloader7a 2s infinite,
        swpf-preloader7b .5s infinite;
}

.swpf-preloader7:after {
    background: #FFF;
    animation-delay: -1s, 0s;
}

@keyframes swpf-preloader7a {
    0% {
        top: 0;
        left: 0
    }

    25% {
        top: 100%;
        left: 0
    }

    50% {
        top: 100%;
        left: 100%
    }

    75% {
        top: 0;
        left: 100%
    }

    100% {
        top: 0;
        left: 0
    }
}

@keyframes swpf-preloader7b {

    80%,
    100% {
        transform: rotate(0.5turn)
    }
}


.swpf-preloader8 {
    width: 80px;
    aspect-ratio: 1;
    display: grid;
    color: #FFF;
    background:
        conic-gradient(from -153deg at right, #0000, currentColor 1deg 126deg, #0000 127deg) calc(50% + 5px) 0 /10px 50%,
        conic-gradient(from 27deg at left, #0000, currentColor 1deg 126deg, #0000 127deg) calc(50% - 5px) 100%/10px 50%,

        linear-gradient(to top right, currentColor 50%, #0000 0%) calc(50% + 10px) calc(50% - 10px) /20px 20px,
        linear-gradient(to bottom left, currentColor 50%, #0000 0%) calc(50% - 10px) calc(50% + 10px) /20px 20px;
    background-repeat: no-repeat;
    -webkit-mask: radial-gradient(circle 5px, #0000 90%, #000);
    animation: swpf-preloader8 1.5s infinite linear;
}

.swpf-preloader8:before,
.swpf-preloader8:after {
    content: "";
    grid-area: 1/1;
    background: inherit;
    transform: rotate(60deg);
}

.swpf-preloader8:after {
    transform: rotate(120deg);
}

@keyframes swpf-preloader8 {
    100% {
        transform: rotate(1turn)
    }
}


.swpf-preloader9 {
    --b: 5px;
    width: calc(12*var(--b));
    aspect-ratio: 1;
    border-radius: 50%;
    background:
        repeating-radial-gradient(calc(2*var(--b)) at top, #0000 -1px, #FFF 0 calc(50% - 1px), #0000 50% calc(100% - 1px)) calc(50% + var(--b)) 100%,
        repeating-radial-gradient(calc(2*var(--b)) at bottom, #FFF -1px, #0000 0 calc(50% - 1px), #FFF 50% calc(100% - 1px)) 50% 0;
    background-size: 150% 50%;
    background-repeat: no-repeat;
    mask:
        radial-gradient(calc(1.5*var(--b)) at calc(100% - var(--b)/2) 0, #0000 calc(100%/3), #FFF calc(100%/3 + 1px) 110%, #0000 0) calc(50% + var(--b)/2) 100%/calc(3*var(--b)) 50% exclude no-repeat,
        conic-gradient(#FFF 0 0);
    animation: swpf-preloader9 1s infinite linear;
}

@keyframes swpf-preloader9 {
    100% {
        transform: rotate(1turn)
    }
}


.swpf-preloader10 {
    width: 40px;
    height: 20px;
    background: #FFF;
    position: relative;
    animation: swpf-preloader10a 1.5s infinite linear;
}

.swpf-preloader10:before,
.swpf-preloader10:after {
    content: "";
    position: absolute;
    background: inherit;
    bottom: 100%;
    width: 50%;
    height: 100%;
    animation: inherit;
    animation-name: swpf-preloader10b;
}

.swpf-preloader10:before {
    left: 0;
    transform-origin: bottom left;
    --s: -1;
}

.swpf-preloader10:after {
    right: 0;
    transform-origin: bottom right;
}

@keyframes swpf-preloader10a {

    0%,
    10% {
        transform: translateY(0%) scaleY(1)
    }

    49.99% {
        transform: translateY(-50%) scaleY(1)
    }

    50% {
        transform: translateY(-50%) scaleY(-1)
    }

    90%,
    100% {
        transform: translateY(-100%) scaleY(-1)
    }
}

@keyframes swpf-preloader10b {

    10%,
    90% {
        transform: rotate(0deg)
    }

    50% {
        transform: rotate(calc(var(--s, 1)*180deg))
    }
}


.swpf-preloader11 {
    width: 48px;
    height: 48px;
    border: 2px solid #FFF;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    box-sizing: border-box;
    animation: swpf-preloader11 1s linear infinite;
}

.swpf-preloader11::after {
    content: '';
    box-sizing: border-box;
    position: absolute;
    left: 50%;
    top: 0;
    background: #FFF;
    width: 3px;
    height: 24px;
    transform: translateX(-50%);
}

@keyframes swpf-preloader11 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}


.swpf-preloader12 {
    width: calc(100% - 100px);
    height: 4px;
    display: inline-block;
    position: relative;
    background: rgba(255, 255, 255, 0.15);
    overflow: hidden;
}

.swpf-preloader12::after {
    content: '';
    width: 100%;
    height: 4px;
    background: #FFF;
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;
    animation: swpf-preloader12 2s linear infinite;
}

@keyframes swpf-preloader12 {
    0% {
        left: 0;
        transform: translateX(-100%);
    }

    100% {
        left: 100%;
        transform: translateX(0%);
    }
}


.swpf-preloader13 {
    box-sizing: border-box;
    display: inline-block;
    width: 50px;
    height: 80px;
    border-top: 5px solid #fff;
    border-bottom: 5px solid #fff;
    position: relative;
    background: linear-gradient(#FAFAFA 30px, transparent 0) no-repeat;
    background-size: 2px 40px;
    background-position: 50% 0px;
    animation: swpf-preloader13a 5s linear infinite;
}

.swpf-preloader13:before,
.swpf-preloader13:after {
    content: "";
    width: 40px;
    left: 50%;
    height: 35px;
    position: absolute;
    top: 0;
    transform: translatex(-50%);
    background: rgba(255, 255, 255, 0.4);
    border-radius: 0 0 20px 20px;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: 0 0px;
    animation: swpf-preloader13c 5s linear infinite;
}

.swpf-preloader13:after {
    top: auto;
    bottom: 0;
    border-radius: 20px 20px 0 0;
    animation: swpf-preloader13b 5s linear infinite;
}

@keyframes swpf-preloader13c {

    0%,
    100% {
        background-image: linear-gradient(#FAFAFA 40px, transparent 0);
        background-position: 0% 0px;
    }

    50% {
        background-image: linear-gradient(#FAFAFA 40px, transparent 0);
        background-position: 0% 40px;
    }

    50.1% {
        background-image: linear-gradient(#FAFAFA 40px, transparent 0);
        background-position: 0% -40px;
    }
}

@keyframes swpf-preloader13b {
    0% {
        background-image: linear-gradient(#FAFAFA 40px, transparent 0);
        background-position: 0 40px;
    }

    100% {
        background-image: linear-gradient(#FAFAFA 40px, transparent 0);
        background-position: 0 -40px;
    }
}

@keyframes swpf-preloader13a {

    0%,
    49% {
        transform: rotate(0deg);
        background-position: 50% 36px;
    }

    51%,
    98% {
        transform: rotate(180deg);
        background-position: 50% 4px;
    }

    100% {
        transform: rotate(360deg);
        background-position: 50% 36px;
    }
}


.swpf-preloader14 {
    width: 48px;
    height: 48px;
    display: block;
    margin: 20px auto;
    position: relative;
    border: 3px solid #FFF;
    border-radius: 50%;
    box-sizing: border-box;
    animation: swpf-preloader14 2s linear infinite;
}

.swpf-preloader14::after {
    content: '';
    box-sizing: border-box;
    width: 6px;
    height: 24px;
    background: #FFF;
    transform: rotate(-45deg);
    position: absolute;
    bottom: -20px;
    left: 46px;
}

@keyframes swpf-preloader14 {
    0% {
        transform: translate(-10px, -10px);
    }

    25% {
        transform: translate(-10px, 10px);
    }

    50% {
        transform: translate(10px, 10px);
    }

    75% {
        transform: translate(10px, -10px);
    }

    100% {
        transform: translate(-10px, -10px);
    }
}


.swpf-preloader15 {
    position: relative;
}

.swpf-preloader15:after {
    content: '';
    background: #FFF;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 32px;
    height: 32px;
    border-radius: 4px;
    transform-origin: -16px -32px;
    animation: swpf-preloader15 1s linear infinite;
}

@keyframes swpf-preloader15 {

    0%,
    100% {
        transform: rotate(-45deg) translate(-50%, -50%)
    }

    50% {
        transform: rotate(-245deg) translate(-50%, -50%)
    }
}


.swpf-preloader16 {
    width: fit-content;
    font-weight: bold;
    font-family: monospace;
    font-size: 30px;
    background: radial-gradient(circle closest-side, #FFF 94%, #0000) right/calc(200% - 1em) 100%;
    animation: swpf-preloader16 1s infinite alternate linear;
}

.swpf-preloader16::before {
    content: "Loading...";
    line-height: 1em;
    color: #0000;
    background: inherit;
    background-image: radial-gradient(circle closest-side, #000 94%, #FFF);
    -webkit-background-clip: text;
    background-clip: text;
}

@keyframes swpf-preloader16 {
    100% {
        background-position: left
    }
}