.center {
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.loader {
    --color: var(--klic-color-loader-lightblue, #008dc9);
    width: 70px;
    height: 70px;
    background-color: var(--color);
    outline: 6px solid var(--color);
    outline-offset: -1px;
    opacity: 0;
    animation: delayVisibility 30s;
    transform: rotate(45deg) scale(0.5);
}

.loader:before {
    content: '';
    display: block;
    width: 70px;
    height: 70px;
    background-color: var(--color);
    animation: rotate 3s infinite;
}


@keyframes delayVisibility {
  0%, 9% { opacity: 0; }
  10%, 100% { opacity: 1; }
}

@keyframes rotate {
    0% {
        transform-origin: bottom left;
        transform: translate(-5px, -75px) rotate(0deg) scale(1.1);
    }

    25% {
        transform-origin: bottom left;
        transform: translate(-5px, -75px) rotate(-180deg) scale(1.1);
    }

    26% {
        transform-origin: top left;
        transform: translate(-5px, 75px) rotate(-180deg) scale(1.1);
    }

    50% {
        transform-origin: top left;
        transform: translate(-5px, 75px) rotate(-360deg) scale(1.1);
    }

    51% {
        transform-origin: top right;
        transform: translate(5px, 75px) rotate(-360deg) scale(1.1);
    }

    75% {
        transform-origin: top right;
        transform: translate(5px, 75px) rotate(-540deg) scale(1.1);
    }

    76% {
        transform-origin: bottom right;
        transform: translate(5px, -75px) rotate(-540deg) scale(1.1);
    }

    100% {
        transform-origin: bottom right;
        transform: translate(5px, -75px) rotate(-720deg) scale(1.1);
    }
}