.loader {
    position: relative;
}
.outer,
.middle,
.inner {
    border: 4px solid transparent;
    border-top-color: #86c5ff;
    border-right-color: #d1d1d1;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
}
.outer {
    width: 100%;
    height: 100%;
    margin-left: -50%;
    margin-top: -50%;
    animation: spin 2s linear infinite;
}
.middle {
    width: 60%;
    height: 60%;
    margin-left: -30%;
    margin-top: -30%;
    animation: spin 1.75s linear reverse infinite;
}
.inner {
    width: 30%;
    height: 30%;
    margin-left: -15%;
    margin-top: -15%;
    animation: spin 1.5s linear infinite;
}
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}
.border{ border:solid 10px; border-radius: 50% ; width: 120px; height: 120px;}
.success { border-color: #aaf5a4; }
.fail { border-color: #ffabab; }
.tick{
    width: 30%;
    height: 60%;
    border-right:10px solid #aaf5a4;
    border-bottom:10px solid #aaf5a4;
    transform: rotate(30deg);
    margin: 10% auto auto 30%;
}
.cross{
    width: 100%;
    height: 100%;
    margin: auto;
    position: relative;
}
.cross::before,
.cross::after{
    content: "";
    position: absolute;
    height: 75%;
    width: 10px;
    top:13%;
    left:47%;
    background: #ffabab;
}
.cross::before{
    transform: rotate(45deg);
}
.cross::after{
    transform: rotate(-45deg);
}