* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.container {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}
.loader {
    height: 3.12rem;
    width: 3.12rem;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}
.loader .line {
    height: 50%;
    width: 0;
    border: 0.25rem solid #caf0f8;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    transform-origin: bottom;
    border-radius: 0.62rem;
    animation: lineAnimate 2s ease-in-out infinite alternate;
}
.loader .line:nth-child(1) {
    transform: rotate(30deg) translatey(-20px);
    animation-delay: 0.16s;
}
.loader .line:nth-child(2) {
    transform: rotate(60deg) translatey(-20px);
    animation-delay: 0.33s;
}
.loader .line:nth-child(3) {
    transform: rotate(90deg) translatey(-20px);
    animation-delay: 0.5s;
}
.loader .line:nth-child(4) {
    transform: rotate(120deg) translatey(-20px);
    animation-delay: 0.66s;
}
.loader .line:nth-child(5) {
    transform: rotate(150deg) translatey(-20px);
    animation-delay: 0.83s;
}
.loader .line:nth-child(6) {
    transform: rotate(180deg) translatey(-20px);
    animation-delay: 1s;
}
.loader .line:nth-child(7) {
    transform: rotate(210deg) translatey(-20px);
    animation-delay: 1.16s;
}
.loader .line:nth-child(8) {
    transform: rotate(240deg) translatey(-20px);
    animation-delay: 1.33s;
}
.loader .line:nth-child(9) {
    transform: rotate(270deg) translatey(-20px);
    animation-delay: 1.5s;
}
.loader .line:nth-child(10) {
    transform: rotate(300deg) translatey(-20px);
    animation-delay: 1.66s;
}
.loader .line:nth-child(11) {
    transform: rotate(330deg) translatey(-20px);
    animation-delay: 1.83s;
}
.loader .line:nth-child(12) {
    transform: rotate(360deg) translatey(-20px);
    animation-delay: 2s;
}
@keyframes lineAnimate {
    0%, 40% {
        border-color: #caf0f8;
   }
    60%, 100% {
        border-color: #0096c7;
   }
}
