body{
    justify-content: center;
    align-items: center;
    display: flex;
    height: 100vh;
    background: #312b5e;
}
.loader{
    width: 300px;
    height: 300px;
    margin: 0 auto;
    position: relative;
}
.loader .loader-inner-1{
    width: 300px;
    height: 300px;
    border-radius: 50%;
    border-bottom: 10px dashed #fca107;
    position: absolute;
    animation: loading-1 5s infinite linear;
}
.loader .loader-inner-2{
    width: 200px;
    height: 200px;
    border-radius: 50%;
    border-bottom: 10px dotted #78f124;
    position: absolute;
    top: 50px;
    left: 45px;
    animation: loading-1 1s infinite linear;
}
.loader .loader-inner-3{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border-bottom: 5px solid #ff0728;
    position: absolute;
    top: 100px;
    left: 90px;
    animation: loading-1 2s infinite linear;
}
@keyframes loading-1{
    from{ -webkit-transform: rotate(0deg); }
    to{ -webkit-transform: rotate(360deg); }
}