/*--------------------------------------------------------------------------*
// 
<div class="loader">
    <div class="cssload-ventilator"></div>
</div>
/*--------------------------------------------------------------------------*/



.cssload_ventilator .loader {
    position: relative;
    width: 195px;
    height: 224px;
    overflow: hidden;
    margin:0px auto;
}

.cssload_ventilator .loader .cssload-ventilator {
    margin: auto;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    box-sizing: border-box;
    width: 49px;
    height: 49px;
    background-color: rgb(255,255,255);
    box-shadow: 0 0 8px 1px rgba(0,0,0,0.25);
}

.cssload_ventilator .loader .cssload-ventilator {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    animation: cssload-spin 1.15s ease-in-out infinite reverse;
    transition: all 0.23s ease;
}

.cssload_ventilator .loader .cssload-ventilator:before, .cssload_ventilator .loader .cssload-ventilator:after {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgb(255,255,255);
    box-sizing: border-box;
    border-radius: 50%;
    box-shadow: 0 0 8px 1px rgba(0,0,0,0.25);
    animation: cssload-shapeit 0.58s ease infinite alternate;
    transition: all 0.23s ease;
    content: '';
}
.cssload_ventilator .loader .cssload-ventilator:before {
    left: -125%;
    border-left: 2px solid rgb(176,98,121);
}
.cssload_ventilator .loader .cssload-ventilator:after {
    right: -125%;
    border-right: 2px solid rgb(176,98,121);
}


@keyframes cssload-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
@keyframes cssload-shapeit {
    from {
        border-radius: 50%;
    }
    to {
        border-radius: 0px;
    }
}