:root{
    --loader-width: 70px;
    --loader-height: 70px;
    --loader-color-primary: #27ae60;
    --loader-color-secondary: #eee;
    --line-width: 3px;
    --animation-duration: 2s;
    --loader-initial-scale: 0.1;
}
.loader, .loader:before, .loader:after{
    box-sizing: border-box;
    flex-grow: 0;
    flex-shrink: 0;
}
.loader.clock {
    position: relative;
    width: var(--loader-width, 100px);
    height: var(--loader-height, 100px);
    border-radius: 50%;
    border: var(--line-width, 4px) solid var(--theme-primary-color, #33f);
}

.loader.clock::before{
    content: '';
    position: absolute;
    top: 8px;    
    left: calc(50% - 2px);
    background: var(--theme-primary-color, #33f);
    width: var(--line-width, 4px);
    height: calc( 50% - 8px );
    border-radius: calc(var(--line-width, 4px) + 1);
    transform-origin: 50% 100%;
    animation: circle-loader var(--animation-duration,1s) infinite linear ;
}
.preloader {
    position: fixed;
    width: 100vw;
    height: 100vh;
    z-index: 9999999;
    background: #fff;
	top: 0;
	left: 0;
}
@keyframes circle-loader {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
.loader.simple-circle {
    transform-origin: center center;
    border: var(--line-width, 4px) solid var(--theme-primary-color, #fff);
    border-right-color: var(--theme-primary-color, #00f);
    width: var(--loader-width, 100px);
    height: var(--loader-height, 100px);
    border-radius: 50%;
    animation: circle-loader var(--animation-duration, 1s) infinite ease-out;
}