style.css

*{
    margin: -0;
    padding: 0;
}

body{
    min-height: 100px;
    margin-left: 100px;
    margin-top: 80px;
    background: #fff;

}
.spinner{
    height: 30px;
    width: 30px;
    animation: spinner 0.7s linear infinite;
}
@keyframes spinner {
    to {
        transform: rotate(360deg);
    }
    
}

.loader{
    position: relative;
    width: 200px;
    height: 200px;
    /*background: #f00;*/
    display: flex;
    justify-content: center;
    align-items: center;
}

.loader h2{
    font-family: 'Courier New', Courier, monospace;
    font-size: 30px;
    font-weight: 500;
    color: #fff;

}
.loader span:nth-child(1){
     border-radius: 55% 45% 60% 40% / 47% 37% 63% 53%  ;
}

.loader span:nth-child(2){
    animation-direction: reverse;
    border-radius: 45% 55% 54% 46% / 57% 54% 46% 43%   ;
}
.loader span:nth-child(3){
    animation-duration: 3s;
    border-radius: 53% 47% 38% 62% / 50% 55% 45% 50%  ;
}

.loader span{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 200px;
    border: 2px solid #fff;
    pointer-events: none;
    animation: animate 5s linear infinite;

}

@keyframes animate{
    0%{
        transform : rotate(0deg);
    }
    0%{
        transform : rotate(360deg);
    }

}